码迷,mamicode.com
首页 > 其他好文 > 详细

CANVAS画布与SVG的区别

时间:2018-12-17 14:48:03      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:背景   文件的   网络游戏   曲线   use   javascrip   矢量   fun   asc   

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;"来定义。

 

CANVAS画布与SVG的区别

标签:背景   文件的   网络游戏   曲线   use   javascrip   矢量   fun   asc   

原文地址:https://www.cnblogs.com/zhen-prz/p/10130548.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!