Canvas: sposta il problema dell’immagine

Ho un problema con il mio script che usa la canvas.

Voglio spostare la mia immagine ma con drawImage l’immagine si muove ma il risultato è qualcosa del genere:

inserisci la descrizione dell'immagine qui

quindi, il mio codice è

function desenhaBonecoDir(){ var ctxt = document.getElementById('camadaBoneco').getContext("2d"); bonecoX = bonecoX -10; ctxt.drawImage(bonecoLeft, bonecoX, bonecoY); } 

e penso che l’unico modo sia usare SVG (modalità mantenuta). È corretto?

Qualche tutorial? o esempio? – “Come spostare un’immagine con SVG” Come posso risolverlo?

Grazie

È necessario cancellare tutto o parte della canvas e ridisegnare. Sì, usare SVG o HTML + CSS è più facile, ma non necessario.

Ecco un esempio di spostamento degli sprite su uno sfondo, con la possibilità di cancellare e ridisegnare tutto o parte del BG: http://phrogz.net/tmp/image_move_sprites_canvas.html

Nota che usare solo i CSS è più veloce della canvas .

Questo codice risolve il mio problema

 context2D.clearRect(0, 0, canvas.width, canvas.height); 

Buon esempio qui: http://brighthub.com/internet/web-development/articles/38744.aspx?p=3