Canvas,SVG与Flash的异同点

之前我写过一篇文章,抱怨canvas和flash差距太大。后来我发现我错了,因为事实上拿canvas和flash比较出发点就是错误的。

html5中有两种绘图方式,即canvas和svg.他们的理论知识我不想解释,我只是把他们和flash来对比一下,让大家能明白他们各自的优点,然后进行最佳选择。

先说一下他们的基本特点,以免出现像我之前那样搞不清概念的错误。(可能以下说法并不完全准确,请有识之士不吝指出)

canvas画出的图形都是附在canvas区域之上,但图形都是不可操作的,如果要操作图形,就是直接操作整个canvas,即清空canvas和重绘。

svg是一种在网页上画矢量图的方法,结构基于XML。他和canvas最大的不同,就是他的每个图形都是独立的,都具有一个“html标签”,都可以分别操作(这点和flash有点类似)

flash是世界上应用最广的web插件,他不只可以画图,也可以置入声音,而且他的每个图形都可以独立操作。但是,他始终是一个浏览器插件,苹果很不待见他。

canvas和svg的共同点:

  1. 都是新的html支持点,很可能都会加入w3c正式标准
  2. 都可以和html良好结合,无需插件
  3. 都可以用css和JS进行操作
  4. 浏览器对他们的支持都还不完备,各有各的私有属性
  5. ie系列对canvas和svg都基本抓瞎

canvas和svg的区别:

  1. canvas画的图形都是一体的没法独立操作,而svg的每个图形都可以独立操作
  2. canvas画10000条线,页面上还是只有一个canvas元素;svg画10000条线,那页面中就可能会加入10000个标签
  3. canvas操作单独图形的方法是清除掉再重绘,svg则直接操作那个图形所在的标签即可。
  4. canvas画出的图形可以称之为位图,而svg画出的是矢量图
  5. 重要:canvas的图形对搜索引擎是一片黑,而svg的图形由于可以夹带文本,seo毫无压力

svg和flash的共同点:

  1. 画的每个图形都是可以独立操作的
  2. svg几乎可以看作是html的flash

svg和flash的区别:

  1. 一个svg标签,可以包含很多个图形,这些图形都是类似html的标签,对网页是可见的
  2. 一个flash文件,是其中所有图形的一个包,这个包对于浏览器来说是打不开的(所以实际上你插入一个flash文件,他里面的图形对网页来说还是不可见的)
  3. svg只能画矢量图,flash则可以载入任何图像,并可置入音频。
  4. 同canvas,flash里面的数据对搜索引擎也是抓瞎

canvas,svg和flash的效率比较:

  1. 首先要承认,flash的效率最高,功能也最强大
  2. canvas由于是频繁的重绘画布,所以在重绘太频繁时会导致效率低下
  3. svg由于每个图形都是独立的标签,所以在标签太多的时候会严重拖累网页效率(比如,10000个点)

下面说说canvas,svg和flash分别擅长什么:

canvas擅长什么:

canvas虽然每次动画都要重绘画布,但他效率尚可,可以制作不是十分复杂的动画效果,游戏,与audio标签等结合,可以做出不错的游戏。

canvas之所以擅长动画,是因为他会清空画布,不会造成元素累积过多卡死浏览器

最重要的是,他跨PC和移动平台,毫无压力

注意:canvas的绘图过程必须讲究技巧,不然还是很可能卡死浏览器

svg擅长什么:

svg由于是矢量图,所以他对点线面这样的图形很擅长,他完全可以用来实现一个web的Excel图形报表。这方面google等行业巨头已经有不少应用了

而且,svg可以插入搜索引擎能识别的文本,对SEO至关重要。

同样,svg也跨PC和移动端

svg并不擅长做复杂的动画,因为他的动画牵扯的元素太多了——牵一发而动全身,同时动画N个元素的效率是不会高的

特别要注意,svg不能实现太复杂的效果,只要他的标签一多,效率就急剧下降

Flash擅长什么:

canvas和svg擅长的,flash都擅长

而且,flash的图形更平滑,在每个浏览器上执行都没有兼容问题

但flash在移动端方面的支持有些问题,不是Adobe不想,而是苹果之类的不买账,不给他支持;但android系统无压力

另外,flash的seo始终是个问题,适合于不需要对他里面的数据进行索引的场合。

注意:效率再高也有个度,如果你在网页里插入几十个flash,那你的效率还是会很低——你的浏览器你的显卡你的CPU都没这个执行力。

————————结束了———————-

我想说,canvas和svg结合起来,真的可以与flash一拼。但flash已经领先太多了,w3c必须加油。

虽然canvas和svg都是好东西,但各个浏览器却都有自己的打算,造成相关w3c标准始终无法出台;不过,只要他们的功能是一直在加强就行了。

如果flash最终拿下了IOS的市场,那canvas和svg的地位就岌岌可危了。

PS:再次重申,以上说法可能有重大错误,请了解相关知识的同学为我指明,以免我误人子弟,谢谢

7 评论

发表评论

电子邮件地址不会被公开。