在前端开发中我们做动画主要有四种方式：CSS的animation和transition；canvas；svg动画；flash动画。今天我们主要来看看cancas、svg与flash。
1.区别
canvas画出的图形都是附在canvas区域之上，但图形都是不可操作的，如果要操作图形，就是直接操作整个canvas，即清空canvas和重绘。
svg是一种在网页上画矢量图的方法，结构基于XML。他和canvas最大的不同，就是他的每个图形都是独立的,都具有一个“html标签”，都可以分别操作（这点和flash有点类似）
flash是世界上应用最广的web插件，他不只可以画图，也可以置入声音，而且他的每个图形都可以独立操作。但是，他始终是一个浏览器插件，苹果很不待见他。
canvas和svg的共同点：
- 都是新的html支持点，很可能都会加入w3c正式标准
- 都可以和html良好结合，无需插件
- 都可以用css和JS进行操作
- 浏览器对他们的支持都还不完备，各有各的私有属性
- ie系列对canvas和svg都基本抓瞎
canvas和svg的区别：
- canvas画的图形都是一体的没法独立操作，而svg的每个图形都可以独立操作
- canvas画10000条线，页面上还是只有一个canvas元素；svg画10000条线，那页面中就可能会加入10000个标签
- canvas操作单独图形的方法是清除掉再重绘，svg则直接操作那个图形所在的标签即可。
- canvas画出的图形可以称之为位图，而svg画出的是矢量图
重要：canvas的图形对搜索引擎是一片黑，而svg的图形由于可以夹带文本，seo毫无压力
svg和flash的共同点：
- 画的每个图形都是可以独立操作的
- svg几乎可以看作是html的flash
svg和flash的区别：
- 一个svg标签，可以包含很多个图形，这些图形都是类似html的标签，对网页是可见的
- 一个flash文件，是其中所有图形的一个包，这个包对于浏览器来说是打不开的（所以实际上你插入一个flash文件，他里面的图形对网页来说还是不可见的）
- svg只能画矢量图,flash则可以载入任何图像，并可置入音频。
- 同canvas，flash里面的数据对搜索引擎也是抓瞎
canvas,svg和flash的效率比较：
- 首先要承认，flash的效率最高，功能也最强大
- canvas由于是频繁的重绘画布，所以在重绘太频繁时会导致效率低下
- 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都没这个执行力。