Excanvas für dynamisch erstellte Canvas-Elemente

Question

Excanvas "für Enternet Explorer" funktioniert gut für vordefinierte Canvas-Elemente. Aber wenn es darum geht, Canvas-Elemente dynamisch während des Skripts zu erstellen, wird es nicht funktionieren ...

Irgendwelche Ideen?

Answer 1

Von the documentation:

Wenn Sie Ihre Leinwand Element erstellt haben, dynamisch wird es haben nicht die getContext Methode hinzugefügt, um die Element. Um es zum Laufen zu bringen, müssen Sie initElement auf dem G_vmlCanvasManager Objekt aufrufen.

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

Answer 2

ich hängen Sie ihn an dem Dokument vor initElement Aufruf und es funktioniert für IE8, Chrom und ff. Nahm mich eine Weile, um es herauszufinden.

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

Ich denke, ich habe den Trick zu diesem gefunden. IE weiß nicht, was ein "Canvas" ist, also wenn Sie ein Canvas-Element mit Ihrem Javascript erstellen, funktioniert es nicht.

Andere Beispiele Ich habe gesehen tun, um ihre Leinwand zu erstellen:

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

Also der Trick ist, nur IE zu täuschen, indem stattdessen etwas legal und den Aufruf der Leinwand Initialisierung auf sie zu schaffen.

I verwendet Jquery eine Ajax-GET für diesen Block von HTML zu tun, die ich dann in das DOM eingefügt:

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

Im Javascript nach dem Ajax-Aufruf abgeschlossen ist und die HTML eingefügt wird, kann ich meine Canvas-Initialisierung. Dies ist nur der interessante Ausschnitt aus meiner init-Funktion.

... 
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"); 
... 

Dies funktioniert jetzt für mich in Firefox und IE7.