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

Question

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

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

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

在canvas元素中復制矩形像素區域的最快方法是什么？

Answer 1

嘗試這個：

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

drawImage可以為第一個參數提供HTMLImageElement ， HTMLCanvasElement或HTMLVideoElement 。

Answer 2

對於絕對速度，我會使用overflow:hidden set在<div>使用超大的<canvas> ，然后使用常規DOM方法滾動<div>的<canvas> <div> 。

當然，這會犧牲內存使用而有利於速度。