javascript - 用于动态创建的画布元素的画布

Question

Excanvas “for enternet Explorer”适用于预定义的画布元素。但是当涉及到在脚本期间动态创建画布元素时，它就行不通了……

有任何想法吗？？

Answer 1

从文档中：

如果您已动态创建画布元素，则不会将 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 不知道“画布”是什么，因此当您使用 javascript 创建画布元素时，它不起作用。

我见过的其他示例这样做是为了创建他们的画布：

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

所以诀窍是通过创建合法的东西并在其上调用画布初始化来欺骗 IE。

我使用 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 中，我进行画布初始化。这只是我的 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");
...

这现在在 Firefox 和 IE7 中都适用于我。