在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可以采用an HTMLImageElement,an HTMLCanvasElement或an HTMLVideoElement作为第一个参数.

Answer 2

对于绝对速度,我会使用一个超大的<canvas>内部a <div>with overflow:hiddenset然后使用常规DOM方法来滚动<canvas>内部<div>.

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