为何现在市⾯上做表格渲染可视化技术的,⼤多数都是 canvas ,⽽很少⽤ svg 的?

124 阅读1分钟

都⽤上了可视化技术做渲染, 在这个场景下, ⼤多数考虑的是性能;

所以主要基于⼏个⽅⾯去衡量技术⽅案的选择: 性能、动态交互、复杂图形⽀持。

1.webp

性能:Canvas 通常⽐ SVG 具有更好的性能。Canvas 是基于像素的绘图技术,⽽ SVG 是基于⽮量 的绘图技术。由于 Canvas 的绘图是直接操作像素,所以在⼤规模绘制⼤量图形时,Canvas 的性能 优势更为明显。⽽ SVG ⽣成的图形是由 DOM 元素组成,每个元素都要进⾏布局和绘制,因此在处 理⼤量图形时会有性能瓶颈。

动态交互:Canvas 更适合处理动态交互。由于 Canvas 绘制的图形是像素级别的,可以直接对图形 进⾏像素级别的操作,可以⽅便地进⾏复杂的动画和交互效果。⽽ SVG 的图形是由 DOM 元素组成 的,每个元素都要进⾏布局和绘制,所以在处理复杂的动态交互时,性能⽅⾯可能会受到限制。

复杂图形⽀持:Canvas 更适合处理复杂的图形。由于 Canvas 是像素级别的绘制,可以直接操作像 素,因此可以实现更加灵活和复杂的图形效果,⽐如阴影、渐变等。⽽ SVG 的图形是基于⽮量的, 相对来说对复杂图形的⽀持可能会有⼀些限制。

再见.png