Excanvas pour les éléments de canevas créés dynamiquement

Question

Excanvas "for Enternet Explorer" fonctionne correctement pour les canevas prédéfinis. Mais quand il s'agit de créer dynamiquement des éléments de toile pendant le script, cela ne fonctionnera pas ...

Des idées?

Answer 1

De the documentation:

Si vous avez créé votre toile élément dynamique il pas la méthode getContext ajouté à l'élément . Pour que cela fonctionne, vous devez appeler initElement sur l'objet G_vmlCanvasManager.

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

Answer 2

je l'ajouter au document avant d'appeler initElement et il fonctionne pour IE8, Chrome et ff. Ça m'a pris du temps pour le comprendre.

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

Je pense que j'ai trouvé l'astuce. IE ne sait pas ce qu'est un "canevas", donc quand vous créez un élément canvas avec votre javascript, cela ne fonctionne pas.

D'autres exemples que je l'ai vu faire cela pour créer leur toile:

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

Donc, l'astuce est de simplement tromper IE en créant quelque chose de légal et d'appeler l'initialisation de la toile sur elle à la place.

J'utilisé jquery pour faire une ajax GET pour ce bloc de HTML que je puis inséré dans le DOM:

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

Dans le javascript après l'appel ajax est terminée et le HTML est inséré, je fais mon initialisation de canvas. C'est juste l'extrait intéressant de ma fonction 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"); 
... 

Cela fonctionne maintenant pour moi dans Firefox et IE7.