La tela si ridisegna automaticamente ogni volta che qualcosa cambia?

Question

Ho fatto qualche ricerca su come funziona la tela. Dovrebbe essere "modalità immediata" significa che non ricorda come appare il suo disegno, solo la bitmap rimane ogni volta che qualcosa cambia.

Questo sembra suggerire che la tela non si ridisegna sul cambiamento.
Tuttavia, quando ho provato la tela su iPad (in pratica continuo a disegnare linee parallele sulla tela), il frame rate si degrada rapidamente quando ci sono più linee sulla tela. Le linee sono disegnate più lentamente e in modo più nervoso.

Questo significa che la tela deve effettivamente disegnare l'intera cosa al cambiamento? O c'è un'altra ragione per questo cambiamento nelle prestazioni?

Answer 1

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.