svg - 在 HTML 5 画布上渲染 SVG 图像的性能

Question

SVG 图像非常适合高细节图形，但由于它们包含许多需要在渲染之前计算的坐标，因此与渲染 jpg 相比，它们可能对性能不利，而 jpg 只是绘制预先计算的像素数组?

我使用 Context.drawImage，我不知道是否需要在画布的每个绘制帧中计算 SVG 图形，或者它们是否可能以某种方式被缓存？或者我什么都不担心？

Answer 1

性能将取决于您的特定应用程序和图形的复杂性，但一般来说，矢量图形不会产生重大影响。您的主要瓶颈通常是在画布中操作像素数据；画布越大，绘制所需的时间就越多。

但是，除非您每帧都重新绘制画布，否则唯一执行的计算是您最初绘制图像时所做的计算。当您不修改它时，画布实际上只不过是一个静态位图。