我正在开发一款游戏，允许玩家点击一张卡片并以任意方向将其拖动到屏幕上。在任何时候，800x800画布上总共有64个100x80重叠卡，每个都是程序抽奖。正如你们有些人可能怀疑的那样，画布不喜欢为每一个动作重绘整个画布。为了解决这个问题，我使用缓冲画布绘制卡片，然后尝试使用drawImage()将缓冲画布绘制到主画布。为确保没有图纸累积，我使用drawImage()清除了与我计划clearRect()的位置相关联的画布区域。
我遇到的问题是，因为用于clearRect()和drawImage()的（x，y）坐标来自鼠标的位置，如果用户移动得太快，坐标将不同于上次执行drawImage()的时间到下一个绘制序列期间调用的时间clearRect()。结果是最后一个序列的残差抽取 - 与卡被拖动的速度成比例。
我尝试维护drawImage()的（x，y）坐标，并在下一个序列中使用clearRect()的坐标（而不是当前鼠标位置）。然而，现在不再显示残差抽取，残差我们有剩余的清除（擦除）。
关于如何解决这个问题的想法？
注意：我的动画费率是使用RequestAnimationFrame而不是SetInterval()处理的。
答案 0 :(得分：2)
假设在拖放操作期间你的画布是静态的，一个非常简单的方法就是只需缓存渲染。
换句话说，当拖放操作开始时，将当前画布保存到另一个画布中。停止所有渲染，除了涉及拖动卡的渲染。现在，无论何时需要重新绘制，只需从复制画布重新绘制即可。因为你基本上只是从一个复制到另一个，所以它应该非常快。
在每个处理周期中，您将获取被拖动卡片的当前位置，用复制品中的数据填充该位置，然后在新位置重绘拖动的卡片。
您可以尝试的其他方法是使用某种占位符进行拖动。例如，考虑使用拖动时显示的相同大小的DIV。这应该具有以下优点：在拖动时不需要触摸画布，因此也可以为其提供更好的性能。