使用HTML5 Canvas API

1、检测浏览器支持状况

在建立HTML5 canvas元素以前，首先要确保浏览器可以支持它。若是不支持，你就要为那些古董级浏览器提供一些替代文字。

2、在页面中加入canvas

在HTML页面中插入canvas元素很是直观。如：<canvas id="c" widht="300" height="225"></canvas>

canvas中不少用于设置样式和外观的函数不会直接修改canvas的展现结果。只有当对路径应用绘制（stroke）或填充（fill）方法时，结果才会显示出来。不然，只有在显示图像、显示文本或者绘制、填充和清除矩形框的时候，canvas才会立刻更新。

getContext()：获取使用canvas的类型。如：canvas.getContext('2d');

3、变换

了解变换最简单的方法就是把它当成是介于开发人员发出的指令和canvas显示结果之间的一个修正层（modificationlayer）。无论在开发中是否使用变换，修正层始终都是存在的。

修正——在绘制系统中的说法是变换——在应该用的时候能够被顺序应用、组合或者随意修改。每一个绘制操做的结果显示在canvas上以前都要通过修正层去作修正。

关于可重用代码有限公有一条重要的建议：通常绘制都就从原点（坐标系中的0，0点）开始，应用变换（缩放、平移、旋转等），而后不断修改代码直至达到但愿的效果。

摘自《HTML5高级程序设计》