IE 8 Canvas 使用 excanvas polyfill：没有错误，但动画未在 IE 8 上运行答案

【问题标题】：IE 8 Canvas using excanvas polyfill: no errors, but animation is not running on IE 8IE 8 Canvas 使用 excanvas polyfill：没有错误，但动画未在 IE 8 上运行
【发布时间】：2013-12-23 23:44:54
【问题描述】：

我有一个使用画布的动画，它在 Chrome 中运行良好。我正在使用 excanvas polyfill 来支持 IE 8。根据excanvas instructions，我在头部使用IE 条件标签附加了excanvas。

Working page here | Full code on Github

简化的 HTML：

<head>
    <meta charset="utf-8">
    <!--[if gte IE 9]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
    <!--[if lt IE 9]><meta http-equiv="X-UA-Compatible" content="IE=7" /><![endif]-->

    <link rel="stylesheet" href="css/normalize.min.css">
    <link rel="stylesheet" href="css/ecard.css">

    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <!--[if lt IE 9]><script src="js/vendor/excanvas.js"></script><![endif]-->
</head>
<body>
    <canvas id="card" width="1000" height="750"></canvas>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

    <script src="js/ecard.js"></script>
</body>

我正在使用答案推荐的三元运算符定义 ctx

var canvas = (typeof(G_vmlCanvasManager) != 'undefined') ? G_vmlCanvasManager.initElement($("canvas#card")[0]) : $("canvas#card")[0];
    ctx = canvas.getContext('2d');

当我尝试从 IE 8 运行动画时，它什么也没做。我在 IE 8 开发人员工具中看不到任何错误。但是，当我在 IE 8 开发人员工具控制台中键入 ctx.fillRect(25, 25, 100, 100); 并运行它时，我收到错误“'ctx' is undefined”。

从 IE 8 开发人员工具来看，excanvas.js 似乎已正确加载。有什么想法吗？

【问题讨论】：

标签： canvas internet-explorer-8 html5-canvas polyfills

【解决方案1】：

尝试将其添加到头部：

<meta http-equiv="X-UA-Compatible" content="IE=7" />

在标准模式下，excanvas 使用的 VML 已关闭。

而不是这个（如果仍然有问题）：

ctx = $("canvas#card")[0].getContext('2d');

尝试：

var canvas = (typeof(G_vmlCanvasManager) != 'undefined') ? G_vmlCanvasManager.initElement($("canvas#card")[0]) : $("canvas#card")[0];

ctx = canvas.getContext('2d');

【讨论】：

这个github.com/mrengy/xmas-ecard/commit/… 摆脱了错误“对象不支持此属性或方法”，但是当我在 IE 8 开发人员工具的控制台中输入ctx.fillRect(25,25,100,100); 并单击“运行脚本”时，我得到一个错误“'ctx'未定义”
@MikeEng 最后是因为 ctx 是在加载文档时调用的匿名函数的范围内定义的。如果您将var ctx; 移动到全局范围，您应该能够从控制台使用它。希望这会有所帮助。
谢谢，但实际上 ctx 已经在全局范围内声明了。我没有在问题中包含那部分代码，但请参阅 github.com/mrengy/xmas-ecard/blob/master/js/ecard.js