webshim polyfill canvas将无法在IE7模式下运行

时间:2011-05-20 15:29:11

标签: html5 jquery-plugins canvas excanvas webshim

我在使用webshims插件画布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对象而不是一个上下文。

请帮帮忙?

1 个答案:

答案 0 :(得分:1)

我从插件作者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