webshim polyfill画布将不工作在IE7模式 [英] webshim polyfill canvas won't work in IE7 mode
问题描述
我在IE9使用IE7模式时遇到以下错误：
SCRIPT438：对象不支持属性或方法'fillRect'
problem.html，第21行字符7
<$ c $ <$> c><！DOCTYPE html>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> DealingTree< / title>
< meta http-equiv =Content-typecontent =text / html; charset = utf-8/>
< script type =text / javascriptsrc =/ js / modernizr.js> < / script>
< script type =text / javascriptsrc =/ js / jquery.js> < / script>
< script type =text / javascriptsrc =/ js / sssl.js> < / script>
< script type =text / javascriptsrc =/ js / webshims / js-webshim / minified / polyfiller.js> < / script>
< / head>
< body>
< canvas id =savingsheight =350width =700> < / canvas>
< script type =text / javascript>
//<！[CDATA [
window.FlashCanvasOptions = {disableContextMenu：true};
$ .webshims.setOptions（'canvas'，{type：'flashpro'}）;
$ .webshims.polyfill（'canvas'）;
var canvas = $（'＃savings'）;
var context = canvas.getContext（'2d'）;
context.fillStyle ='＃F00';
context.fillRect（0,0700,350）;
//]>
< / script>
< / body>
< / html>
无论是使用默认（excanvas）还是flashpro都会出现问题。
更新：我觉得getContext（）返回一个jQuery对象，而不是上下文。
帮助， >
我从插件作者Alexander Farkas通过电子邮件收到了以下说明：
问题如下。 Webshims
使用脚本
加载器进行异步填充。这对于现代浏览器的性能
是有好处的。这也意味着，
，你必须等待，直到
画布功能准备就绪。
您的代码应该包装在
domready事件，一切都很好：
window.FlashCanvasOptions = {disableContextMenu：true};
$ .webshims.setOptions（'canvas'，{type：'flashpro'}）;
$ .webshims.polyfill（'canvas'）;
$（function（）{
var canvas = $（'＃savings'）;
var context = canvas.getContext（'2d'）;
context.fillStyle = ＃F00';
context.fillRect（0,0,700,350）;
}）;
您可以在文档中找到有关
问题的更多信息@
http://afarkas.github.com/webshim/ demos / index.html＃polyfill-ready
I am having problems getting the webshims plugin canvas polyfill to work.
I get the following error in IE9 using IE7 mode:
SCRIPT438: Object doesn't support property or method 'fillRect'
problem.html, line 21 character 7
when I try to run this code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DealingTree</title>
<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="/js/modernizr.js"> </script>
<script type="text/javascript" src="/js/jquery.js"> </script>
<script type="text/javascript" src="/js/sssl.js"> </script>
<script type="text/javascript" src="/js/webshims/js-webshim/minified/polyfiller.js"> </script>
</head>
<body>
<canvas id="savings" height="350" width="700"> </canvas>
<script type="text/javascript">
//<![CDATA[
window.FlashCanvasOptions = { disableContextMenu: true };
$.webshims.setOptions( 'canvas', { type: 'flashpro' } );
$.webshims.polyfill('canvas');
var canvas = $('#savings');
var context = canvas.getContext('2d');
context.fillStyle='#F00';
context.fillRect(0,0,700,350);
//]>
</script>
</body>
</html>
The problem happens whether I use the default (excanvas) or flashpro.
UPDATE: It appears to me that getContext() is returning a jQuery object instead of a context.
Help, please?
I received the following explanation from the plugin author, Alexander Farkas, via email:
The problem is the following. Webshims does async polyfilling using a script loader. Which is good for performance in modern browsers. This also means, that you have to wait untill the canvas feature is ready.
Your code should be wrapped in a domready event and everything is fine:
window.FlashCanvasOptions = { disableContextMenu: true };
$.webshims.setOptions( 'canvas', { type: 'flashpro' } );
$.webshims.polyfill('canvas');
$(function(){
var canvas = $('#savings');
var context = canvas.getContext('2d');
context.fillStyle='#F00';
context.fillRect(0,0,700,350);
});
You find more informations about your problem in the documentation @ http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
这篇关于webshim polyfill画布将不工作在IE7模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
