在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> 。

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