javascript - HTML Canvas，缓慢且笨重

Question

我有 4 个 Canvas ，每一个 Canvas 都是 64x128px。我将它们堆叠起来是因为我想模仿小型水平 LCD 屏幕及其功能。我的问题是它变得迟缓和笨重，我有 2 个动画同时运行，重新加载时间为 100 毫秒。我可以做些什么来解决这个问题，或者我只是想在浏览器中做很多事情？

基本上我有间隔，每 100 毫秒我就会清理 Canvas 并再次绘图。

Answer 1

是否需要每 100 毫秒刷新一次？您只想在需要时重绘 Canvas 以获得最大效率。

例如，您可能只希望每 100 毫秒删除并重绘一张 Canvas ，并且只应在该 Canvas 上绘制您想要每 100 毫秒重绘的内容。如果某些内容仅因用户交互而发生变化，请将其放在不同的 Canvas 上，并且仅在用户与其交互(例如:点击)时重新绘制该 Canvas 。

动画也可能看起来很滞后，因为您只是每 100 毫秒重绘一次。这只是每秒 10 次 (10fps) - 也许您应该考虑使用 requestAnimationFrame() 。很难知道您什么时候没有共享代码。