在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

对于绝对速度，我会在<canvas>内使用<div>来设置overflow:hidden，然后使用常规DOM方法滚动<canvas>内的<div> 1}}。

当然，这会牺牲内存使用而有利于速度。