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]-->