首页 > 专栏 > 计算机图形学 > 文章详情
SVG 和 Canvas 的区别 发布于:2023-02-09 09:22:20   来源:李伟的博客   查看:61  讨论:0

一、可扩展性:

· SVG是基于矢量的点、线、形状和数学公式来构建的图形,该图形是没有像素的,放大缩小不会失真。6Pq易塔云建站-模板下载,web开发资源,技术博客
· Canvas是由一个个像素点构成的图形,放大会使图形变得颗粒状和像素化(模糊)。6Pq易塔云建站-模板下载,web开发资源,技术博客
· SVG可以在任何分辨率下以高质量的打印,Canvas不适合在任意分辨率下打印。

二、渲染能力:

· 当SVG很复杂时,它的渲染就会变得很慢,因为在很大程度上去使用DOM时,渲染会变得很慢。6Pq易塔云建站-模板下载,web开发资源,技术博客
· Canvas提供了高性能的渲染和更快的图形处理能力,例如:适合制作H5小游戏。6Pq易塔云建站-模板下载,web开发资源,技术博客
· 当图像中具有大量元素时,SVG文件的大小会增长得更快(导致DOM变得复杂),而Canvas并不会增加太多。

三、灵活度:

· SVG可以通过JavaScript和CSS进行修改,用SVG来创建动画和制作特效都非常方便。6Pq易塔云建站-模板下载,web开发资源,技术博客
· Canvas只能通过JavaScript进行修改,创建动画得一帧帧重绘。

四、使用场景:

· Canvas主要用于游戏开发、绘制图形、复杂照片的合成,以及对图片进行像素级别的操作,如:取色器、复古照片。6Pq易塔云建站-模板下载,web开发资源,技术博客
· SVG非常适合显示矢量徽标(Logo)、图标(ICON)和其他几何设计。

评论

  • 匿名