如何在HTML5画布元素中最快地移动一个矩形（像素）区域？

Question

我想实现HTML5画布元素内容的垂直滚动，而不是重新渲染整个内容。相反，我想将整个内容向下/向上移动，并只渲染已滚动到视图中的区域。

我尝试使用getImageData和putImageData函数进行实验，但在我的测试中它们几乎与重新绘制整个场景一样慢。

// scroll 20px down
var data = ctx.getImageData(0, 0, width, height-20);
ctx.putImageData(0, 20);

如何在画布元素内最快地复制矩形像素区域？

- Fabian Jakobs

Answer 1

试试这个：

ctx.drawImage(ctx.canvas, 0, 0, width, height-20, 0, 20, width, height-20);

drawImage 可以使用 HTMLImageElement、HTMLCanvasElement 或 HTMLVideoElement 作为第一个参数。

- Juan

Answer 2

为了获得绝对的速度，我会在一个设置了overflow:hidden的

内使用一个过大的，然后使用常规的DOM方法来滚动

中的。

当然，这样做会牺牲内存使用以换取速度。

- slebetman

---

好主意，但不幸的是我事先不知道确切的尺寸，滚动区域可能有成千上万的像素高度，所以我认为这种方法对我不适用。 - Fabian Jakobs

我希望在实现应用程序中的滚动之前就已经了解到这种方法。我使用双缓冲和一个大型隐藏画布以及一个小型视口画布。然后，将新的可见部分从隐藏画布复制到视口画布。虽然它能工作，但可能可以更快。而且，如果图像高度可以达到数千像素，我的解决方案将无法工作。 - Paul Chernoch

但是，如果没有期望能够向下滚动，当你到达底部时，你可以在新的“特大”画布上重新绘制最后一个屏幕。如果你有任何空闲时间（比如消息流中的暂停），你可以重新绘制和截断，甚至没有人注意到。前一种技术不能消除延迟，但它确实限制了它发生的次数。 - Will Hartung