javascript - 在 HTML5 Canvas 元素内移动矩形(像素)区域的最快方法是什么

Question

我想实现 HTML5 canvas 元素内容的垂直滚动。我不想再次呈现整个内容。相反，我想将整个内容向下/向上移动，并且只渲染已滚动到 View 中的区域。

我试验了 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 作为第一个参数。