什麼是在HTML5 canvas元素內移動矩形（像素）區域的最快方法

Question

我想實現HTML5 canvas元素內容的垂直滾動。我不想再次呈現整個內容。相反，我想將整個內容向上/向下移動，並只渲染已滾動到視圖中的區域。

我嘗試使用getImageData和putImageData函數，但在我的測試中，它們幾乎和重繪整個場景一樣緩慢。

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

複製畫布元素中矩形像素區域的最快方法是什麼？

Answer 1

嘗試這種情況：

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

drawImage可以帶有HTMLImageElement，一個HTMLCanvasElement或HTMLVideoElement對於第一個參數。

Answer 2

對於絕對速度，我會用一個過大<canvas>內<div>與overflow:hidden設置，則使用常規的DOM方法來滾動<div>內<canvas>。

當然，這犧牲了內存使用，以支持速度。