Tuval her şeyi değiştirdiğinde kendini yeniden çiziyor mu?

Question

Tuvalin nasıl çalıştığı hakkında biraz araştırma yaptım. "Acil mod" olması gerekiyordu, onun çiziminin neye benzediğini hatırlamadığı anlamına gelir, sadece bitmap her şey değiştiğinde kalır.

Bu değişime kendisini yeniden çizmek olmadığını tuval önermek gibi görünüyor. (Temelde tualime paralel çizgiler çizilerek devam) iPad'de tuval test edildiği zaman
Ancak, kare hızı tuval üzerinde daha fazla satır olduğunda hızla düşer. Çizgiler daha yavaş ve daha ürkek bir şekilde çizilir.

demek tuval aslında değişikliği her şeyi çizmek zorunda mı? Ya da performanstaki bu değişikliğin başka bir nedeni var mı?

Answer 1

HTML tuval çağrısı yapıldığında doldurmak/Her inme sonrası piksellerin son halini hatırlar. Asla kendini yeniden çizmez. (Başka bir HTML nesnesi uzaklıkta sonra tekrar tuval üzerinde hareket ettirilir ve eğer web tarayıcı, örneğin, ekran son görüntünün bölümlerini-blit yeniden gerekebilir, ama çizim komutları yeniden verme olarak aynı değildir.

Bağlam, biriktirdiğiniz herhangi bir yol da dahil olmak üzere mevcut durumunu her zaman hatırlar.Yani (yanlışlıkla) 'yeniler' arasındaki yolunuzu temizlememeniz olasıdır ve böylece ilk karede bir satır çizersiniz, ikinci karede iki üçüncü çerçeve üç hat üzerinde çizgiler, ve benzeri. (Eğer çizimler arasındaki tuval temizleyerek? ctx.closePath() ve ctx.beginPath() Are diyorsun?)

İşte an example tuval kendisini çizmez gösteren bu. Hatta on binlerce satırda yüzlerce çizgi ile aynı kare hızını görüyorum (Chrome'da 200 fps'de, Firefox 8.0'da 240 fps'de, çerçeve başına 10 satır çizildiğinde).

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); 

eylem Görülme: http://phrogz.net/tmp/canvas_refresh_rate.html

kodunuzu aslında bunu yapıyor ne şüpheli karşı ne yaptığını daha geribildirim için, bizimle test vakası paylaşır. müthiş örneğin