javascript - Canvas 重新绘制被卡住(性能问题)

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 3 年前。

Improve this question

我即将为我的 Raspi 项目创建一个 GUI。 Raspi3 上运行 Nodejs，Raspi3 运行 NodeJs 服务器，然后在 kiosk 模式下通过 Chromium 请求它。

该 GUI 的一页需要可视化 48 个电位计、12 个按钮、8 个推子的状态。 NodeJs-Server 通过 websocket 将数据(由用户修改)发送到客户端，客户端重新绘制整个 Canvas 。到目前为止，对于一些元素来说效果很好:

works fine but with a slight delay if you look closer

现在问题是，随着需要绘制的元素数量不断增加，性能下降到 Not Acceptable 延迟时间。

works, but with a way too big dalay, as more elements are drawn

而这些还不是需要绘制的内容的一半。

我现在很困惑，因为在我决定走那条路之前，我读到了 Canvas 的速度有多快，如果我停用所有 Canvas 绘图，然后简单地 console.log()通过 websocket 传入的数据，速度快得像实时一样。

那我做错了什么？也许最好不要在每次值变化时绘制整个 Canvas ，而是对 Canvas 进行动画处理？也许有人有这方面的经验？

Here is the code ..当你查看assets/js/menu.class.js时，这是生成 Canvas 的文件。函数createControllerGUI(options)每次值更改时都会通过 websocket 调用。

Answer 1

Canvas 速度很快，但仍然占用 CPU 资源。速度也随着平台的不同而略有变化。

您的函数会在每次更改时执行所有绘图操作。这些操作有描边、填充、居中对齐文本等等(我没有详细查看)。

有一些方法可以优化绘图操作。

部分重绘

也许是最有效的。跟踪小部件的位置，跟踪消息之间的数据更改，并仅绘制差异。在小部件占据的区域上使用clearRect并重新绘制它。不要触摸其他像素。除非 Octopus 正在使用硬件，否则每帧最多将有 2 或 3 个小部件发生变化。

一次全部划动。

您可以一次跟踪所需的所有路径，而不是在每个小部件的基础上进行描边，在更改小部件时使用 moveTo 到新位置，并在循环结束时使用单次描边操作。

缓存

例如，如果您有一些旋转控件，则可以在一个小的单独 Canvas 上绘制一次它们，并使用该 Canvas 作为源图像，以便在需要表示旋转控件时以不同 Angular 绘制。DrawImage 通常通过硬件操作进行优化，而单个填充和描边则可能不会。

可能还有其他方法，您可以查看可以为您执行此操作的高级库，公开小部件逻辑而不是低级绘图操作。