javascript - 已知像素变化时的 Canvas 优化

Question

我目前正在开发一个网络应用程序，其中只有单个像素变化是已知的，它像事件一样实现:

函数 pixelChanged(x, y, color)

这些需要绘制到 Canvas 上。我尝试了两种方法来实现这一点:

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

现在这两种方法的性能似乎都很差。第一个导致多次重绘，第二个重绘整个图像，即使只有一小部分区域发生变化。

我的具体问题是，是否有更好的方法来实现它(可能类似于 1.，但在某种程度上延迟了？)。

如果不是，我应该选择哪种方法？在这种情况下我该如何优化它？

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

复制

Answer 1

我采用的方法是将一个大图像分解成一个 NxN 的网格，并重新绘制发生变化的特定区域。我发现一个合适的大小可以平衡重绘的数量与重绘的大小，大约为 50x50px。如果您需要绘制最大 px/sec 的精确最佳数字，我在基准测试中找到了它。

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