canvas详解

1.  canvas是HTML5的核心技术，其厉害之处：

（1）绘制图形

（2）绘制图表

（3）动画效果

（4）游戏开发

2.  canvas与svg

html5有两个主要的2d图形技术：canvas和svg。事实上canvas与svg是完全不同的技术，canvas与svg的关系，就像“美术与几何”的关系一样，区别：

（1）canvas是使用javascript动态生成的，svg则是使用xml静态描述的

（2）canvas是基于“位图”的，适用于像素处理和动态渲染，图形放大会影响质量。svg是基于“矢量”的，不适用于像素处理和静态描述，图形放大不会影响质量。也就是说使用canvas绘制出来的是一个“位图”，而使用svg绘制出来的是一个“矢量图”

（3）每次发生修改，canvas需要重绘，而svg不需要重绘

3.  canvas的宽度高度

可以有两种方式定义：

（1）在HTML属性中定义

（2）在CSS样式中定义（但是这种方式定义的话，在使用canvas对象获取宽度/高度的时候，获取到的是默认的值，而不是实际的宽度高度，也就是说无法获取canvas对象正确的宽度和高度）

4.  canvas对象的方法

（1）getContext('2d')

（2）toDataURL()    获取canvas对象产生的位图的字符串

5. 兼容性

>=IE9

对于IE7，8则可以借助explorercanvas扩展来解决。

<!--[if IE]>

<script src="https://github.com/arv/explorercanvas/excanvas.js"></script>

<![end if]-->