javascript - 動的に作成されたキャンバス要素の Excanvas

Question

Excanvas "for enternet Explorer" は、定義済みのキャンバス要素に対して正常に機能します。しかし、スクリプト中にキャンバス要素を動的に作成するとなると、うまくいきません...

何か案は？？

Answer 1

ドキュメントから：

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は「キャンバス」が何であるかを認識していないため、JavaScriptを使用してキャンバス要素を作成すると機能しません。

私が見た他の例は、キャンバスを作成するためにこれを行います。

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

したがって、トリックは、合法的なものを作成し、代わりにキャンバスの初期化を呼び出すことによって、IEをだますことです。

jqueryを使用してこのhtmlブロックに対してajaxGETを実行し、それを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の両方で機能しています。