Dessin HTML5 avec fonction "replay" "

Question

J'essaie d'implémenter une application de dessin html5 Actuellement, je peux autoriser la sauvegarde d'une image dessinée Je veux être en mesure d'avoir une fonction de rediffusion qui redessine l'image de manière à ce qu'il ait été dessiné à l'origine presque comme s'il s'agissait d'une vidéo.Toutes les idées

Answer 1

Canvas n'a pas d'arbre DOM comme le suggère joni Canvas dessine des pixels, de sorte que vous ne pouvez pas récupérer ou déplacer des objets après avoir dessiné

Vous pouvez enregistrer un cadre à l'aide de canvas.getImageData() dans un tableau, puis restaurer ces cadres dans le même ordre, en utilisant canvas.putImageData(), même si je ne suis pas sûr de son efficacité. une grande taille de la toile

Exemple:

// Start with an array where you'll save all frames. 
var frames = []; 

// Save the output of your canvas to the frames array. Do this every X seconds or X amount of drawing. 
var frame = myCanvasElement.getImageData(0, 0, myCanvasElement.width, myCanvasElement.height); 
frames.push(frame); 

// When the user is done drawing, you can do a replay by restoring the frames one by one in a certain interval. 
var fps = 15; 
var i = 0; 
var myInterval = setInterval(function() 
{ 
    myCanvasElement.putImageData(frames[i], 0, 0); 

    i++; 
    if (i == frames.length) 
    { 
     // We've played all frames. 
     clearInterval(myInterval); 
    } 
}, 1000/fps); 

Answer 2

Je pense que toute action qui se traduit par le dessin sur la toile que vous enregistrez simplement dans un tableau ordonné.

Vous pouvez ensuite parcourir le tableau et répéter.