使用excanvas polyfill的IE 8 Canvas:没有错误,但IE 8上没有运行动画 [英] IE 8 Canvas using excanvas polyfill: no errors, but animation is not running on IE 8
问题描述
我有一个使用画布的动画,在Chrome中工作正常。我正在使用excanvas polyfill支持IE 8。我根据 excanvas说明在头部使用IE条件标记附加了excanvas 。
I have an animation using canvas that is working fine in Chrome. I am using the excanvas polyfill for IE 8 support. I attached excanvas using an IE conditional tag in the head, as per the excanvas instructions.
简化版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
I am defining ctx using a ternary operator as recommended by the answer
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'未定义。
When I try to run the animation from IE 8, it does nothing. I see no errors in IE 8 Developer Tools. However, when I type ctx.fillRect(25, 25, 100, 100);
in the IE 8 Developer Tools console and run it, I get the error " 'ctx' is undefined".
从IE 8开发人员工具中,似乎正确加载了excanvas.js。任何想法?
From IE 8 developer tools, it seems that excanvas.js is loaded properly. Any ideas?
推荐答案
尝试将此添加到头部:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
在标准模式下,excanvas使用的VML已关闭。
In standard mode VML used by excanvas is turned off.
而不是这个(如果还是个问题):
And instead of this (if still a problem):
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');
这篇关于使用excanvas polyfill的IE 8 Canvas:没有错误,但IE 8上没有运行动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!