HTML画布，滞后和笨重

Question

我有4个画布一个在另一个上面，每个画布都是64x128px。我正在堆叠它们，因为我想模仿小型水平LCD屏幕及其功能。我的问题是它变得迟钝和笨重，我有2个动画同时运行，重启时间为100毫秒。我可以做些什么来解决这个问题，或者我只是想在浏览器中做些什么？

基本上我有间隔，每100毫秒我正在清理画布并重新画画。

Answer 1

你需要每100毫秒刷新一次吗？您只想在需要时重新绘制画布以获得最大效率。

例如，您可能只希望每100毫秒擦除并重绘一个画布，并且只应在该画布上绘制每100毫秒重绘一次的内容。如果某些内容仅因用户交互而发生变化，请将其放在不同的画布上，并仅在用户与其交互时重绘该画布（例如：点击）。

动画也可能看起来很迟钝，因为你只是每100毫秒重绘一次。这只是每秒10次（10fps） - 也许你应该考虑使用requestAnimationFrame()。很难知道你何时没有共享你的代码。