canvas、svg与flash

在前端开发中我们做动画主要有四种方式：CSS的animation和transition；canvas；svg动画；flash动画。今天我们主要来看看cancas、svg与flash。

1.区别

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画出的是矢量图

重要：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都没这个执行力。