我在让 webshims 插件 canvas polyfill 工作时遇到问题。
使用 IE7 模式在 IE9 中出现以下错误:
SCRIPT438: Object doesn't support property or method 'fillRect'
problem.html, line 21 character 7
当我尝试运行此代码时:
<!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>
无论我使用默认的(excanvas)还是flashpro,都会出现问题。
更新:在我看来, getContext() 返回的是 jQuery 对象而不是上下文。
请帮助?
我通过电子邮件收到了插件作者 Alexander Farkas 的以下解释:
问题如下。网络垫片
使用脚本进行异步填充
装载机。这对性能有好处
在现代浏览器中。这也意味着,
你必须等到
画布功能已准备就绪。
您的代码应该包含在
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 http://afarkas.github.com/webshim/demos/index.html#polyfill-ready
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)