已知像素更改时的画布优化

Question

我目前正在开发一个只知道单个像素更改的Web应用程序，它们像事件一样实现：

function pixelChanged(x, y, color)

这些需要绘制到画布上。我尝试过两种方法来实现这个目标：

1. 直接使用fillRect
绘制像素
2. 记住像素并使用putImageData每隔几微秒将它们放在画布上

现在这两种方法似乎性能都很差。第一个导致重绘，第二个重绘整个图像，即使只有一点区域改变。

我的具体问题是，如果有更好的方法来实现这个（可能是1.，但在某种程度上延迟？）。

如果没有，我更喜欢哪种方法？在这种情况下如何优化它？

提前致谢并致以最诚挚的问候，

复制

Answer 1

我采用的方法是将大图像分解为NxN网格并重绘已更改的特定区域。我找到了一个不错的尺寸，可以平衡重绘的数量与重绘的大小，大约为50x50px。如果您需要精确的最佳数字以获得最大px /秒，我可以从基准测试中获得它。

因此，如果您有60x60的更改，则需要重新绘制4到9个50x50的正方形。

Answer 2

使用不同的canvas-optimization方法检查此article。我建议你结合几个优化，看看它是如何进行的。请注意，我们的眼睛无法识别大区域上的频繁像素变化，因此缓冲像素变化并一次绘制多个变化是有意义的。另请注意，浏览器需要几毫秒才能应用您的更改，因此请勿将间隔设置得太小。