【前端可视化】Canvas 和 SVG 区别

可扩展性

SVG 是基于矢量的点、线、形状和数学公式来构建的图形,该图形是没有像素的,放大缩小不会失真.

Canvas 是由一个个像素点构成的图形,放大会使图形变得颗粒状和像素化(模糊)

因此SVG可以在任何分辨率下以高质量的打印。Canvas 不适合在任意分辨率下打印。

渲染能力

当 SVG 很复杂时,它的渲染就会变得很慢,因为在很大程度上去使用 DOM 时,渲染会变得很慢口。

Canvas 提供了高性能的渲染和更快的图形处理能力,例如: 适合制作H5小游戏。

当图像中具有大量元素时,SVG 文件的大小会增长得更快(导致DOM变得复杂),而Canvas并不会增加太多。

灵活度

SVG 可以通过JavaScript 和 CSS 进行修改,用SVG来创建动画和制作特效非常方便。

Canvas只能通过JavaScript进行修改,创建动画得一顿重绘。

使用场景

SVG 非常适合显示矢量徽标 (Logo) 、图标(ICON) 和其他几何设计。
Canvas 主要用于游戏开发、绘制图形、复杂照片的合成,以及对图片进行像素级别的操作,如: 取色器、复古照片。

参考博客

Canvas 和 SVG 有什么区别?
Canvas 和 SVG 的区别是什么?

posted @ 2022-07-11 22:33  努力挣钱的小鑫  阅读(160)  评论(0编辑  收藏  举报