什么是在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>。

当然，这牺牲了内存使用，以支持速度。