画布重新绘制被卡住（性能问题）

Question

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

这个 GUI 的一页需要可视化 48x 电位器、12x 按钮、8x 推子的状态。NodeJs-Server 通过 websocket 向客户端发送数据（由用户修改），客户端重新绘制整个画布。到目前为止，对于一些元素来说效果很好：

工作正常，但如果你仔细看会有轻微的延迟

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

有效，但由于绘制了更多元素，因此 dalay 太大了

而那些甚至不是需要绘制的东西的一半。

我现在很困惑，因为在我决定走那条路之前，我阅读了画布的速度，如果我停用所有画布绘图，而只是console.log()通过 websocket 输入的数据，它就像实时一样快。

那我做错了什么？也许最好不要在每次值变化时绘制整个画布，而是为画布设置动画？也许有人有这方面的经验？

这是代码.. 当您查看时assets/js/menu.class.js，这是生成画布的文件。createControllerGUI(options)每次通过 websocket 调用该函数，每次值更改时。

Answer 1

Canvas 速度很快，但仍然是 CPU 密集型的。速度也会随着平台而变化。您的函数会在每次更改时执行所有绘图操作。这些操作有描边、填充、居中对齐的文本等等（我没有仔细看）。有一些方法可以优化绘图操作。部分重绘也许是最有效的。跟踪小部件的位置，跟踪从消息到消息更改的数据并仅绘制差异。在小部件占用的区域上使用 clearRect 并重新绘制它。请勿触摸其他像素。除非章鱼正在使用硬件，否则每帧最多可以更改 2 或 3 个小部件。一次中风。您可以一次跟踪所需的所有路径，而不是在每个小部件的基础上进行描边，在更改小部件时使用 moveTo 到新位置，并在循环结束时使用单个描边操作。缓存例如，如果您有一些旋转控件，您可以在单独的小画布上绘制它们一次，并使用该画布作为源图像以不同的角度绘制，如果您需要表示旋转控件。DrawImage 通常使用硬件操作进行优化，而单个填充和描边可能不会。可能还有其他方法，您可以查看可以为您执行此操作的高级库，公开小部件逻辑而不是低级绘图操作。