我要评论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
- 依赖分辨率
- 不支持事件处理器
- 文本渲染力弱
- 能够以 .png 或 .jpg 的格式保存结果图形
- 最合适图像密集型的游戏，其中许多的对象会被频繁的重绘
svg
- 不依赖分辨率
- 支持事件处理器
- 最合适带有大型渲染区域的应用程序（如，百度地图、谷歌地图等等）
- 不适合游戏的应用
- 复杂度高会减慢渲染的速度
- 以单个文件的形式独立存在，后缀名为.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;"来定义。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论