HTML5 Rimuovi oggetto disegno precedente su tela

Question

Ho un oggetto poligonale (ad esempio un'auto) disegnato all'interno di un canvas HTML5 con l'aiuto dei metodi moveTo e lineTo. Voglio disegnare ripetutamente quell'oggetto in diverse posizioni nell'area di disegno (simulando un oggetto in movimento). Il mio problema è che l'oggetto disegnato precedente non viene cancellato. Invece, più immagini sono disegnate sulla tela. Come posso risolvere questo problema?

Answer 1

Le tele sono solo array di pixel, non sanno nulla delle forme che avete disegnato.

Ci sono trucchi di animazione che venivano utilizzati nei display bitmap (ad esempio "xor drawing") che possono essere utilizzati per rimuovere la vecchia forma prima di disegnare quella nuova, ma su macchine moderne è generalmente molto più semplice (e perfettamente veloce) per cancellare semplicemente la tela e ricominciare da capo per ogni fotogramma.

Dato i commenti ad altre risposte, suggerirei di utilizzare solo due tele: una per lo sfondo statico e una per l'auto. Se l'immagine di sfondo è statica, potrebbe anche essere un elemento <img> anziché una tela.

Se l'immagine della vettura è statica, è possibile disegnarla anche una sola volta, quindi utilizzare il posizionamento CSS per impostare la sua posizione rispetto allo sfondo per ciascun fotogramma.

Answer 2

È necessario cancellare la tela all'inizio di ogni Draw Frame

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