使用HTML5 Canvas API

一、检测浏览器支持情况

在创建HTML5 canvas元素之前，首先要确保浏览器能够支持它。如果不支持，你就要为那些古董级浏览器提供一些替代文字。

二、在页面中加入canvas

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

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

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

三、变换

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

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

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

摘自《HTML5高级程序设计》