HTML 5之前，要在HTML页面上动态生成图片，要么在服务器端生成位图后输出到HTML页面上显示，要么使用Flash等等第三方工具。HTML 5改变了这种局面，HTML 5新增了一个<canvas.../>元素，这个元素本身的功能比较有限，但通过该元素可以获取一个CanvasRenderingContext2D对象，该对象是一个功能强大的绘图API。
本篇文章将会介绍HTML 5新增的绘图功能，包括绘制几何图形、绘制字符串、利用路径来绘制复杂的集合图形等。还会介绍图形变换、图形叠加、图形填充等内容。
一、使用canvas元素
<canvas.../>元素只是绘制图形的容器，必须使用JavaScript脚本来绘制图形。
HTML 5页面上定义<canvas.../>元素与定义其他普通元素并无任何不同，它除了可以指定id、style、class、hidden等通用属性之外，还可以指定如下两个属性。
- height：该属性设置画布组件高度。
- width：该属性设置画布组件宽度。
在HTML 网页上定义<canvas.../>元素之后，它只是一张“空白”的画布，画布上面一片空白，一无所有。为了向<canvas.../>元素上绘图，必须经过如下3步。
- 获取
<canvas.../>元素对应的DOM对象，这是一个Canvas对象。 - 调用Canvas对象的getContext()方法，该方法返回一个CanvasRenderingContext2D对象，该对象即可绘制图形。
- 调用CanvasRenderingContext2D对象的方法绘图。
二、绘图
1. canvas绘图基础：CanvasRenderingContext2D
每个<canvas.../>元素对应于一个Canvas对象，Canvas对象的getContext(String contextID)方法将会返回一个绘图API，该方法需要一个字符串参数，目前该方法只支持“2d”字符串作为参数，该方法将返回一个CanvasRenderingContext2D对象。
该对象提供了如下表所示的方法绘制各种图形。
除了上表所示的各种方法之外，CanvasRenderingContext2D还允许直接修改它的系列属性，这些属性主要用于控制各种绘图风格。CanvasRenderingContext2D提供的各种属性如下表所示。
在Canvas提供的绘制方法中还用到了一个API：Path，一个Path代表任意多条直线连接而成的任意图形，当Canvas根据Path绘制时，它可以绘制出任意的形状。
2. 绘制几何图形
3. 绘制字符串
4. 设置阴影
5. 使用路径
6. 绘制曲线
7. 绘制位图
三、图形特效处理
1. 使用坐标变换
2. 坐标变换与路径结合使用
3. 使用矩阵变换
四、控制叠加风格
五、控制填充风格
1. 线性渐变
2. 圆形渐变
3. 位图填充
六、位图处理
1. 位图裁剪
2. 像素处理
七、输出位图
