Was ist der schnellste Weg, um eine rechteckige (Pixel) Region innerhalb eines HTML5-Canvas-Elements zu verschieben

Question

Ich möchte vertikales Scrollen des Inhalts eines HTML5-Canvas-Elements implementieren. Ich möchte den gesamten Inhalt nicht noch einmal wiedergeben. Stattdessen möchte ich den gesamten Inhalt nach unten/oben verschieben und nur den Bereich rendern, der in die Ansicht gescrollt wurde.

Ich experimentierte mit den getImageData und putImageData Funktionen, aber in meinen Tests sind sie fast so langsam wie die gesamte Szene neu zu streichen.

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

Was ist der schnellste Weg, um rechteckige Pixelregionen innerhalb eines Canvas-Elements zu kopieren?

Answer 1

Versuchen Sie folgendes:

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

drawImage nehmen kann entweder eine HTMLImageElement, eine HTMLCanvasElement oder eine HTMLVideoElement für das erste Argument.

Answer 2

Für absolute Geschwindigkeit, würde ich eine übergroße <canvas> innerhalb eines <div> mit overflow:hidden gesetzt verwenden dann regelmäßig DOM-Methoden verwenden, um die <canvas> innerhalb des <div> zu blättern.

Natürlich opfert dies Speicherverbrauch zugunsten der Geschwindigkeit.