javascript - 画布动画性能不佳，线条很多

Question

我正在使用画布构建图表。这个图表有很多线条（最多 300 条），每条线都有很多笔划（每条 200 条，或多或少）。

我面临一些性能问题。简单地说，该lineTo功能会消耗“大量”处理时间，使缩放和平移有点滞后。

我开发了一个简单的Code Pen 示例。这不是我的真实图表，但它重现了问题：缩放和平移时，您会感觉到动画滞后。

我觉得我在这里做错了什么（比如每次都清除和重绘所有内容）但我真的不知道它是什么，或者如果不重绘​​所有内容我应该如何进行。

有人可以帮我提高这个性能吗？

谢谢！

标签： javascripthtml5-canvas