Canvas 如果开发者控制台处于活动状态,则无法正常工作

Canvas not working properly if developer console is active

几天前,我在想为什么我的canvas不能正常工作。我正在使用 szimek 的库来创建签名,有时那些笔触看起来有点疯狂。我还在 Edge(结果与 Chrome 相同)和 TOR(正常工作)上进行了测试。

昨天,我找到了为什么会随机发生的解决方案。在打开浏览器开发人员控制台的过程中,我的笔触看起来很疯狂。如果关闭,它们看起来正常(再次绘制时)。

有谁知道为什么会这样,还是它的核心引擎造成的? 这是我的意思的一个例子:

谢谢。

发生这种情况是因为在 Chromium(和 Gecko)中,根据 specs recommendations、UI 事件,例如 mousemovepointermove 被限制为显示器的帧刷新率。

但是,仅在 Chromium 中,无论出于何种原因,当开发工具打开时,它们会发出原始事件...
因此,当开发工具关闭时,即使硬件指针(例如鼠标)确实发出了更多事件,这些事件已 coalesced 变成单个 pointermove 事件,由于每个点都已平均,因此绘制的线条看起来可能更平滑,但实际上您收到的数据较少。

您可以从 pointermove 事件的 getCoallescedEvents, as exposed in of mine, and from these you could also build up the coalescing logic yourself if needed (using requestAnimationFrame() 中检索原始事件列表作为节流器,这正是 Chromium 所做的)。

至于为什么 Chromium 在开发工具打开时会禁用合并...这对我来说仍然是个谜,但我一直没有足够的动力去查找它。