HTML5 canvas 在鼠标拖动期间不显示重绘的内容
HTML5 canvas not showing redrawn content during mouse drags
我有 a circuit simulator that redraws as you drag things around HTML5 canvas。
我注意到，有时在拖动过程中无法重绘。它保留最后绘制的帧，直到我停止移动鼠标，然后开始显示更新的内容。
起初我认为这可能是我在低于 60fps 的情况下使用油门的代码的某种问题。也许计时器事件被更高优先级的 UI 事件或类似事件淹没了。但我分析了 Chrome 中的代码，分析器确认正在调用绘图代码并在合理的时间内完成。
这是我在拖动问题发生时收集的示例配置文件的屏幕截图。注意绘图代码在 5 毫秒内完成，有足够的空闲时间：
所以大多数时候我很困惑，需要了解要检查的内容。
重绘在用户操作触发时不显示的常见原因有哪些？
检查其他绘制循环。
我注意到探查器的堆栈跟踪显示了错误的重绘代码。该程序有一个对话框，其中包含有时需要动画的 canvas。尽管未显示对话框，该代码仍在发送垃圾邮件 requestAnimationFrame。这不知何故干扰了主绘制循环，但我不知道 确切地 为什么。所有抽奖都在隐藏对话框中进行。
一旦我修复了对话框代码垃圾邮件 requestAnimationFrame，拖动时暂停的问题就消失了。
使用 requestAnimationFrame 而不是 setTimeout。
在我的测试（Chrome、Windows 10）期间，我发现如果我快速上下旋转鼠标滚轮，我可以阻止 setTimeout 回调来自 运行 直到我停下来。当涉及到 canvas 动画时，这使得 setTimeout 成为一个非常糟糕的主意。我将节流代码切换为使用 requestAnimationFrame 循环，它一直在重新安排自身直到冷却时间结束，并且滞后明显减少。
我有 a circuit simulator that redraws as you drag things around HTML5 canvas。
我注意到，有时在拖动过程中无法重绘。它保留最后绘制的帧，直到我停止移动鼠标，然后开始显示更新的内容。
起初我认为这可能是我在低于 60fps 的情况下使用油门的代码的某种问题。也许计时器事件被更高优先级的 UI 事件或类似事件淹没了。但我分析了 Chrome 中的代码，分析器确认正在调用绘图代码并在合理的时间内完成。
这是我在拖动问题发生时收集的示例配置文件的屏幕截图。注意绘图代码在 5 毫秒内完成，有足够的空闲时间：
所以大多数时候我很困惑，需要了解要检查的内容。
重绘在用户操作触发时不显示的常见原因有哪些？
检查其他绘制循环。
我注意到探查器的堆栈跟踪显示了错误的重绘代码。该程序有一个对话框，其中包含有时需要动画的 canvas。尽管未显示对话框，该代码仍在发送垃圾邮件 requestAnimationFrame。这不知何故干扰了主绘制循环，但我不知道 确切地 为什么。所有抽奖都在隐藏对话框中进行。
一旦我修复了对话框代码垃圾邮件 requestAnimationFrame，拖动时暂停的问题就消失了。
使用 requestAnimationFrame 而不是 setTimeout。
在我的测试（Chrome、Windows 10）期间，我发现如果我快速上下旋转鼠标滚轮，我可以阻止 setTimeout 回调来自 运行 直到我停下来。当涉及到 canvas 动画时，这使得 setTimeout 成为一个非常糟糕的主意。我将节流代码切换为使用 requestAnimationFrame 循环，它一直在重新安排自身直到冷却时间结束，并且滞后明显减少。