图形化开发(三)03-D3.js之svg图形——Svg和Canvas的区别

图形化开发(三)03-D3.js之svg图形——Svg和Canvas的区别

Svg与Canvas的区别?
  1. 绘制的图片格式不同
Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率,能够以 .png 和 .jpg格式保存存储图像,可以说是位图

SVG 可以在H5中直接绘制,但绘制的是矢量图

由于位图依赖分辨率,矢量图不依赖分辨率,所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。
  1. Canvas不支持事件处理器,SVG支持事件处理器
Canvas 绘制的图像 都在Canvas这个画布里面,是Canvas的一部分,不能用js获取已经绘制好的图形元素。
  1. 适用范围不同
Canvas是逐像素进行渲染的,一旦图形绘制完成,就不会继续被浏览器关注。而SVG是通过DOM操作来显示的。

所以Canvas的文本渲染能力弱,而SVG最适合带有大型渲染区域的应用程序,比如地图。

而Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏。

而SVG由于DOM操作 在复杂度高的游戏应用中 会减慢渲染速度。所以不适合在游戏应用。
上一篇:SVG viewport、viewBox、preserveAspectRatio


下一篇:转 13个免费下载 SVG 图标网站