CANVAS画布与SVG的区别

Posted 2021-01-27 zhen-prz

CANVAS是html5提供的新元素<canvas>，而svg存在的历史要比canvas久远，svg并不是html5专有的标签，最初svg是用xml技术（超文本扩展语言，可以自定义标签或属性）描述二维图形的语言。在H5中看似canvas与svg很像，但是，他们有巨大的差别。

CANVAS

• 　　Canvas 是通过 javascript 来绘制 2D 图形。
• 　　Canvas 是逐像素进行渲染的。
•        在Canvas中，一旦图形被绘制完成，他就不会继续得到浏览器的关注，如果他的位置发生变化，那么就需要重新来绘制图形，其中包括任何或已经被图形覆盖的对象。

SVG

•        Svg 是使用 XML 描述的 2D 图形。
•        Svg 是基于 XML 的，这也就是说 SVG DOM 中的每个元素都是可用的。可以为某个元素附加 JavaScript 事件处理器。
•        在 SVG 中，每个被绘制过的图形均视为对象，如果 SVG 对象的属性发生变化，那么浏览器可以自行重现图形。

     比较

Canvas

1. 依赖分辨率
2. 不支持事件处理器
3. 文本渲染力弱
4. 能够以 .png 或 .jpg 的格式保存结果图形
5. 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘

SVG

1. 不依赖分辨率
2. 支持事件处理器
3. 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
4. 不适合游戏的应用
5. 复杂度高会减慢渲染的速度
6. 以单个文件的形式独立存在，后缀名为.svg，可以在html文件中以img标签的src，元素背景，框架等引入 或者 直接在html文件中引入SVG标签

 从功能上来说

CANVAS可以看做是一个画布。，其绘制出来的图形为标量图，因此，可以在canvas中引入jpg或png这类格式的图片，在实际开发中，大型的网络游戏都是用canvas画布做出来的，并且canvas的技术现在已经相当的成熟。另外，我们喜欢用canvas来做一些统计用的图表，如柱状图曲线图或饼状图等。而svg，所绘制的图形为矢量图，所以其用法上受到了限制。因为只能绘制矢量图，所以svg中不能引入普通的图片，因为矢量图的不会失真的效果，在项目中我们会用来做一些动态的小图标。但是由于其本质为矢量图，可以被无限放大而不会失真，所以就很适合来做地图。

从操作上来说

我们要让canvas里面的一个图片跟随鼠标事件：canvas.onmouseover=function(){}。而svg支持事件的绑定。另外canvas中我们绘制图形通常是通过javascript来实现，svg更多的是通过标签来来实现，如在svg中绘制正矩形形就要用<rect>，这里我们不能用属性style="width:XXX;height:XXX;"来定义。