HTML5 canvas 元素详细教程二：绘制图形。
在开始之前，我们需要对canvas 的网格（grid）或者坐标空间（coordinate space）进行探讨。在中有一个150像素宽， 150像素高的 canvas 对象的HTML模板。在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。现在我们使用默认的状态来进行图形的绘制吧。
相关HTML5 canvas 元素详细教程二