Excanvas用于动态创建的画布元素

Question

Excanvas "for enternet Explorer“可以很好地处理预定义的画布元素。但是，当涉及到在脚本期间动态创建画布元素时，它将无法工作……

有什么想法吗？

Answer 1

来自the documentation

如果您动态创建了canvas元素，则不会将getContext方法添加到该元素中。要使其正常工作，您需要在G_vmlCanvasManager对象上调用initElement。

var el = document.createElement('canvas');
G_vmlCanvasManager.initElement(el);
var ctx = el.getContext('2d');

Answer 2

我在调用initElement之前将它附加到文档中，它适用于ie8、chrome和ff。我花了一段时间才弄明白。

var foo = document.getElementById("targetElementID");
var canvas = document.createElement('canvas');
canvas.setAttribute("width", 620);
canvas.setAttribute("height", 310);
canvas.setAttribute("class", "mapping");
foo.appendChild(canvas);
canvas = G_vmlCanvasManager.initElement(canvas);

Answer 3

我想我已经找到解决这个问题的诀窍了。IE不知道" canvas“是什么，所以当你用你的javascript创建一个canvas元素时，它不能工作。

我见过的其他例子都是这样来创建画布的：

var el = document.createElement('canvas');//this doesn't work in IE

所以诀窍是通过创建一些合法的东西来欺骗IE，并在它上面调用canvas初始化。

我使用jquery对这段html执行ajax GET，然后将其插入到DOM中：

<div id="canvasholder">
    <canvas id="mycanvas" width="1024" height="768" style="width:1024px;height:768px"></canvas>
</div>

在完成ajax调用并插入HTML之后，在javascript中进行canvas初始化。这只是我的init函数中有趣的代码片段。

...
canvas = $('#mycanvas').get(0);//get dom element from jquery
if(!canvas.getContext)//function doesn't exist yet
{
//we're in IE if we reach this block
//otherwise getContext already exists
$('#canvasholder').empty();
//add #mycanvas as a div instead of a canvas
//you could use document.createElement('div') instead of jquery
$('#canvasholder').append(
    '<div id="mycanvas" width="1024" height="768"></div>');
canvas = $('#mycanvas').get(0);
if(typeof G_vmlCanvasManager  != 'undefined' )
{
    canvas = G_vmlCanvasManager.initElement(canvas);
}
}
//now you're set up to draw!
context = canvas.getContext("2d");
...

现在我在火狐和IE7上都能用了。