La tela HTML memorizza lo stato finale dei pixel dopo ogni chiamata di tratto/riempimento. Non si ridisegna mai da solo. (Potrebbe essere necessario che il browser Web ridisposti porzioni dell'immagine finale sullo schermo, ad esempio se un altro oggetto HTML viene spostato sopra l'area di disegno e quindi via di nuovo, ma non è lo stesso come ri-emettere i comandi di disegno.
Il contesto ricorda sempre il suo stato corrente, incluso qualsiasi percorso che è stato accumulato. È probabile che tu stia (casualmente) non cancellando il tuo percorso tra "aggiorna", e così sul primo fotogramma stai disegnando una linea, sul secondo telaio due linee, al terzo telaio tre linee, e così via. (State chiamando ctx.closePath()
e ctx.beginPath()
? sei deselezionando la tela tra i disegni?)
è qui an example mostrando che la tela non si ridisegna se stessa. Anche a decine di migliaia di linee vedo lo stesso frame rate di centinaia di linee (con un limite di 200fps su Chrome, ~ 240fps su Firefox 8.0, quando si disegnano 10 linee per frame).
var lastFrame = new Date, avgFrameMS=5, lines=0;
function drawLine(){
ctx.beginPath();
ctx.moveTo(Math.random()*w,Math.random()*h);
ctx.lineTo(Math.random()*w,Math.random()*h);
ctx.closePath();
ctx.stroke();
var now = new Date;
var frameTime = now - lastFrame;
avgFrameMS += (frameTime-avgFrameMS)/20;
lastFrame = now;
setTimeout(drawLine,1);
lines++;
}
drawLine();
// Show the stats infrequently
setInterval(function(){
fps.innerHTML = (1000/avgFrameMS).toFixed(1);
l.innerHTML = lines;
},1000);
visto in azione: http://phrogz.net/tmp/canvas_refresh_rate.html
Per ulteriori feedback su ciò che il codice è in realtà facendo rispetto a ciò che si sospetta che sta facendo, condividere il tuo caso di test con noi.
Grazie per l'impressionante esempio !!!! Ho scoperto che il problema era semplicemente che non ho chiamato context.closePath() !! – Codier
Ottima risposta. Vorrei che tu avessi alcuni punti di merito per questo! –