用於動態創建畫布元素的Excanvas

Question

Excanvas「for enternet Explorer」對於預定義畫布元素正常工作。但是當涉及到在腳本中動態創建畫布元素時，它將不起作用...

任何想法？

Answer 1

從the documentation：

如果您已經創建了畫布 元素動態不會有 的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的該塊，然後我插入DOM做一個AJAX GET：

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

在JavaScript中的Ajax調用已經完成，HTML插入後，我做我的畫布初始化。這只是我的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中都適用於我。