HTML5 tuval öğesinin içindeki dikdörtgen (piksel) bölgeyi taşımanın en hızlı yolu nedir?

Question

Bir HTML5 tuval öğesinin içeriğinin dikey olarak kaydırılmasını uygulamak istiyorum. Tüm içeriği tekrar oluşturmak istemiyorum. Bunun yerine tüm içeriği aşağı/yukarı taşımak ve sadece görüntüye kaydırılan alanı oluşturmak istiyorum.

getImageData ve putImageData işlevlerini denedim, ancak testlerimde neredeyse tüm sahneyi yeniden boyamak kadar yavaşlar.

// scroll 20px down 
var data = ctx.getImageData(0, 0, width, height-20); 
ctx.putImageData(0, 20); 

Tuval öğesinin içinde dikdörtgen piksel bölgelerini kopyalamanın en hızlı yolu nedir?

Answer 1

bu deneyin:

ctx.drawImage(ctx.canvas, 0, 0, width, height-20, 0, 20, width, height-20); 

drawImage ya bir HTMLImageElement, bir HTMLCanvasElement veya ilk argüman için bir HTMLVideoElement alabilir.

Answer 2

mutlak hız, ben kullanırım, fazlasıyla büyük <canvas> içinde <div> ile overflow:hidden sonra <div> iç <canvas> kaydırmak için düzenli DOM yöntemleri kullanmak ayarlayın.

Elbette bu hafıza kullanımını hız lehine kurban eder.