HTML5的图像系统Canvas与SVG

在HTML5之前，没有标准的提供可供Javascript脚本调用的图像系统，以前的做法通常是通过Div来画点、线、矩形这种非常“笨”的办法来变相的绘图，虽然很“笨”，但也是无奈中被逼出来的一种好方法，虽然效率很差，但是也算是一种可行的方案。有朋友用这个办法画一个哆啦A梦，虽然没有任何抗锯齿效果，居然用了2010个Div，按照常规的画图工具，也就只需要几十个图形指令就可以搞定了。

HTML5给广大开发者带来了很多激动人心的新特性（个人认为增强了B/S系统的开发便利，由传统的仅仅网页功能，向软件系统的UI层发展）其中包括强大的图形系统，Canvas和SVG，对于这在两者，初学者会有些模糊，既然都是画图的工具，为什么会有两个，在使用时该怎么选择呢？下面谈一下我的理解供大家参考。

说起HTML5，说点题外话，大家都会说HTML5怎么怎么强大，支持Socket又支持本地存储，还支持这里说的图像API，但是强大的不是HTML5本身，HTML5只是一种标记语言，是一种被业界认可了的标准。标准这个东西就是这样，它本身没什么直接的作用，他的直接作用是大家都按照我们定的标准来做事，那么做的事就通用了，会被外界支持了。HTML5也是这样，一帮子业界领头的公司在一块讨论，就讨论出这样一套标准，OK，各家回去完善自己的浏览器，支持这个标准吧。于是，我们程序员编写的HTML5就被各浏览器支持了，当然根据不同浏览器又会有一些差别，或许是还没实现对某特性的支持，或者在解析和渲染成网页图像的时候有某些偏差，这就会导致某些时候需要我们考虑的浏览器兼容性问题了，这里难免会想到IE，微软大佬总是自我感觉良好，搞一些非标准的东西，IE6当时就是非常特殊的浏览器，是最难调兼容性的了，被大家深恶痛绝，好在现在随着IE版本的升级，对标准支持的也越来越好了（市场被Firefox,Chrome抢了一大半，再走非主流就玩完了...）

回过头来进入正题，首先简单介绍下Canvas和SVG，Canvas表面意思就是一块空白的“画布”，既然是画布，那你就网上画吧，用笔还是刷子随你便啦~ 但是不管你画什么在上面，我浏览器可不管你画的是狗还是猫，只记录画布上你画了哪些像素，是什么颜色，也就是以“位图”的存储方式来记录，画的各个步骤元素它不会记录。SVG的意思是可缩放的矢量图形，说的有点啰嗦，但是很明显他是以“矢量图”的方式记录的，而其中的矢量图元素分别记录，这就是SVG一个显著的特点，这些矢量图元素在HTML网页中分别存储为一个HTML标签，即以Dom结构存储。而Canvas在HTML中，整个Canvas只有一个标签，里面的内容是不记录为HTML标签的。这样当你用两种方式画出的图形需要使用JS控制时，Canvas只能找到Canvas画布本身这个HTML节点，里面的内容就无法通过DOM来获取了，而SVG方式画的图形，本身就是以HTML的方式存储的，所以内部的元素可以用JS通过DOM简单的获取到。

要改变图像中的元素，SVG可以通过JS对这个元素进行控制，例如变形，位移等，但是Canvas就不能直接这样，只能全部清除掉，重新画一个了的图像。这就相当于做动画片，最传统的方式就是动画片的每一帧都画一张图，不管动画里有变化的是哪个元素，画一个新的帧，就要重新画一张图。而现在通过电脑，例如用Flash软件，图像里的元素是程序来分别保存的，那么做一帧动画就不需要重新画一遍，只需要把有变化的元素改变就可以了。

其实可以这样理解：Canvas比SVG更底层，甚至可以使用Canvas来实现SVG，在JS中封装图形元素的定义，在绘图时先创建一个JS的图形元素对象，然后再把对象渲染到Canvas上，这样，Canvas画布中的元素也在内存中被记录了，需要改变某一元素时，对对应的这个图形元素对象进行属性的更改，然后再渲染所有对象，不需要对其他对象再次创建，其实也就达到了SVG一样的效果了。

上面说这么多并不是说SVG比Canvas好，而是定位不同，就相当于傻瓜相机和单反相机的区别，约底层的越复杂，但是缺又更灵活，可以自己定制细节，可玩性更高。在做一些元素并不多的图形展示，例如图表，地图之类的图形时，基于SVG来做可以省很多事，本身这些图像就是由很多图形元素构成，而程序往往又需要对他们分别控制，那么用SVG正好适合。但是对于元素数量庞大时，因为SVG会把每个元素保存成HTML的DOM元素，每次渲染都需要对它进行解析，那么效率就会很差，例如在网页中做游戏需要较高的图像渲染效率FPS，那么使用更底层的Canvas技术会更合适。中间少了一层，一些功能的调用会更加直接，省掉中间层一些没有用的，浪费资源的动作。

最后，根据你要实现的功能特点，选择使用Canvas还是SVG吧。