HTML Canvas：如何解决用户交互和绘制事件之间的延迟？

Question

我正在开发一款游戏，它允许玩家点击一张卡片并以任意方向将其拖过屏幕。任何时候在 800x800 的画布上总共有 64 张 100x80 重叠的卡片，每一张都是程序绘制。正如你们中的一些人可能怀疑的那样，canvas 不喜欢为每一个动作重新绘制整个画布。为了解决这个问题，我使用缓冲画布来绘制卡片，然后尝试使用drawImage() 将该缓冲画布绘制到主画布上。为了确保没有绘图堆积，我使用clearRect() 清除与我计划drawImage() 关联的画布区域。

我遇到的问题是因为用于clearRect() 和drawImage() 的（x，y）坐标来自鼠标的位置，如果用户移动太快，坐标将不同于最后一次执行drawImage() 的时间到在下一个绘制序列期间调用clearRect() 的时间。结果是最后一个序列的剩余抽牌 - 与拖动卡片的速度成正比。

我尝试维护 drawImage() 的 (x,y) 坐标，并在下一个序列中为 clearRect() 使用这些坐标（而不是当前鼠标位置）。然而，现在不是显示残余绘制，而是残余我们有残余清除（擦除）。

关于如何解决这个问题的想法？

注意：我的动画速率是使用 RequestAnimationFrame 而不是 SetInterval() 处理的。

Answer 1

假设您的画布在拖放操作期间是静态的，那么获得良好性能提升的一个非常简单的方法就是缓存渲染。

换句话说，当拖放操作开始时，将当前画布保存到另一个画布中。停止所有渲染，除了与拖动卡片有关的渲染。现在，每当您需要重新绘制时，只需从您的复制画布重新绘制即可。由于您基本上只是从一个复制到另一个，它应该非常快。

在每个处理周期中，您将获取被拖动卡片的当前位置，用副本中的数据填充该位置，然后在新位置重新绘制被拖动卡片。

您可以尝试的其他方法是使用某种占位符进行拖动。例如，考虑使用在拖动时显示的相同大小的 DIV。这应该具有在拖动时不需要触摸画布的好处，因此也可以为它运行更好的性能。