toile html5 dessin dans le contexte

Question

Puis-je tout dessiner à un contexte et ensuite l'associer à la toile plus tard? par exemple, je veux créer 10 contextes et puis les dessiner un par un dans la toile

Answer 1

C'est une idée intéressante, mais non, vous ne pouvez pas faire cela. Vous ne pouvez pas créer un nouveau contexte indépendant d'un canevas, ni affecter un contexte à un canevas. Ce que vous pouvez faire est de créer 10 canevas dynamiquement (vous n'avez pas besoin de les ajouter au document, donc ils ne seront pas visibles) et ensuite échanger une toile pour une autre quand vous en avez besoin. Par exemple:

var canvas = document.getElementsByTagName('canvas')[0]; 
var frames = []; 
for (var i=0; i<10; ++i){ 
    var c = frames[i] = document.createElement('canvas'); 
    c.width = canvas.width; c.height = canvas.height; 
    var ctx = c.getContext('2d'); 
    // draw what you want here 
} 

var frame = 0; 
// Cycle through the canvases at 15fps 
setInterval(function(){ 
    var c = frames[++frame % frames.length]; 
    canvas.parentNode.replaceChild(c, canvas); 
    canvas = c; 
},1000/15);