Question

Excanvas“for enternet Explorer”适用于预定义的canvas元素。但是当在脚本中动态创建canvas元素时，它将不起作用......

任何想法??

Answer 1

如果您已创建画布动态元素不会有将getContext方法添加到元件。为了让它工作，你需要在上面调用initElement G_vmlCanvasManager对象。

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创建一个canvas元素时，它不起作用。

我见过的其他例子用来创建画布：

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

所以诀窍就是通过创建合法的东西并在其上调用canvas初始化来欺骗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中都适用于我。

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

3 个答案: