1

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

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

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

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

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

4

1 回答 1

2

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

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

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

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

于 2012-04-04T19:26:14.627 回答