在真正开始之前，我们需要先探讨 canvas 的网格（grid）或者坐标空间（coordinate space）。在前一页的 html模板里有一个150像素宽， 150像素高的 canvas 对象。我在画面上叠加上默认网格，如右图。通常网格的1个单元对应 canvas 上的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。这样，左上角的蓝色方块的位置就是距左边x像素和 距上边y像素（坐标(x, y)）。后面的教程中我们将学会如何把移动原点，旋转以及缩放网格。不过现在我们会使用默认的状态。
绘制图形 drawing shapes
canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。
矩形 rectangles
我们首先看看矩形吧，有三个函数用于绘制矩形的：
fillrect(x,y,width,height) : draws a filled rectangle strokerect(x,y,width,height) : draws a rectangular outline clearrect(x,y,width,height) : clears the specified area and makes it fully transparent
它们都接受四个参数，x和y 指定矩形左上角(相对于原点)的位置，width和height是矩形的宽和高。好，实战一下吧。
绘制矩形的例子 rectangular shape example
function draw(){ var canvas = document.getelementbyid('tutorial'); if (canvas.getcontext){ var ctx = canvas.getcontext('2d'); ctx.fillrect(25,25,100,100); ctx.clearrect(45,45,60,60); ctx.strokerect(50,50,50,50); } }
出来的结果应该和下边的是一样的。fillrect
函数画了一个大的黑色矩形（100x100），clearrect
函数清空了中间 60x60 大小的方块，然后strokerect
函数又在清空了的空间内勾勒出一个 50x50 的矩形边框。在接下去的页面里，我们会看到和clearrect
函数差不多另外两个方法，以及如何去改变图形的填充和边框颜色。
绘制路径 drawing paths
不像画矩形那样的直截了当，绘制路径是需要一些额外的步骤的。
beginpath() closepath() stroke() fill()
第一步是用beginpath
创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用beginpath
，子路径组都会被重置，然后可以绘制新的图形。
第二步就是实际绘制路径的部分，很快我们就会看到。
第三步是调用closepath
方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。
最后一步是调用stroke或fill 方法，这时，图形才是实际的绘制到 canvas上去。stroke是绘制图形的边框，fill会用填充出一个实心图形。
注意：当调用fill时，开放的路径会自动闭合，而无须调用closepath。
画一个简单图形（如三角形）的代码如下。
ctx.beginpath(); ctx.moveto(75,50); ctx.lineto(100,75); ctx.lineto(100,25); ctx.fill();
moveto
是一个十分有用的方法，虽然并不能用它来画什么，但却是绘制路径的实用方法的一部分。你可以把它想象成是把笔提起，并从一个点移动到另一个点的过程。它接受x
和y（新的坐标位置）作为参数。当 canvas 初始化或者调用beginpath的时候，起始坐标设置就是原点(0,0)。大多数情况下，我们用moveto方法将起始坐标移至其它地方，或者用于绘制不连续的路径。看看下边的笑脸，红线就是使用moveto 移动的轨迹。
ctx.beginpath(); ctx.arc(75,75,50,0,math.pi*2,true); // outer circle ctx.moveto(110,75); ctx.arc(75,75,35,0,math.pi,false); // mouth (clockwise) ctx.moveto(65,65); ctx.arc(60,65,5,0,math.pi*2,true); // left eye ctx.moveto(95,65); ctx.arc(90,65,5,0,math.pi*2,true); // right eye ctx.stroke(); ctx.beginpath(); ctx.moveto(40,75); ctx.lineto(60,65); ctx.lineto(90,65); ctx.moveto(110,75); ctx.lineto(125,75); ctx.stroke();
我们用lineto方法来画直线。lineto方法接受终点的坐标（x，y）作为参数。起始坐标取决于前一路径，前一路径的终点即当前路径的起点，起始坐标也可以通过moveto方法来设置。示例（如下图）画的是两个三角形，一个实色填充，一个勾边。首先调用beginpath方法创建一个新路径，然后用moveto方法将起始坐标移至想要的位置，然后画两条直线来构成三角形的两条边。
// 填充三角形 ctx.beginpath(); ctx.moveto(25,25); ctx.lineto(105,25); ctx.lineto(25,105); ctx.fill(); // 勾边三角形 ctx.beginpath(); ctx.moveto(125,125); ctx.lineto(125,45); ctx.lineto(45,125); ctx.closepath(); ctx.stroke();
弧线 arcs
我们用arc方法来绘制弧线或圆。标准说明中还包含arcto方法，当前 safari 是支持的，但基于 gecko 的浏览器还未实现。方法接受五个参数：x，y 是圆心坐标，radius 是半径，startangle和endangle分别是起末弧度（以 x 轴为基准），anticlockwise为 true 表示逆时针，反之顺时针。警告：在 firefox 的 beta 版本里，最后一个参数是clockwise，而最终版本不是。因此如果是从 beta 升级至发行版需要做相应修改。
注意：arc方法里用到的角度是以弧度为单位而不是度。度和弧度直接的转换可以用这个表达式：var radians = (math.pi/180)*degrees;。
arc(x, y, radius, startangle, endangle, anticlockwise)
arc
的使用示例
这个示例比之前见到过的要复杂一些，画了12个不同的弧形，有不同夹角和填充状态的。如果我用上面画笑脸的方式来画这些弧形，那会是一大段的代码，而且， 画每一个弧形时我都需要知道其圆心位置。像我这里画 90，180 和 270 度的弧形看起来不是很麻烦，但是如果图形更复杂一些,则实现起来会越来越困难。这里使用两个for
循环来画多行多列的弧形。每一个弧形都用beginpath方法创建一个新路径。然后为了方便阅读和理解，我把所有参数都写成变量形式。显而易见，x 和 y 作为圆心坐标。radius和startangle都是固定，endangle从 180 度半圆开始，以 90 度方式递增至圆。anticlockwise则取决于奇偶行数。最后，通过 if语句判断使前两行表现为勾边，而后两行为填充效果。
for (i=0;i<4;i++){ for(j=0;j<3;j++){ //chinese_xu 原始代码 ctx.beginpath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // arc radius var startangle = 0; // starting point on circle var endangle = math.pi+(math.pi*j)/2; // end point on circle ---//修复错误标点 var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise ctx.arc(x,y,radius,startangle,endangle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } } //chinese_xu 原始代码并没有按照1/4圆递增来画。 //修改后输出4行4列，要把画布扩大到200*200观看 for (i=0;i<4;i++){ for(j=0;j<4;j++){ ctx.beginpath(); var x = 25+j*50; // x coordinate var y = 25+i*50; // y coordinate var radius = 20; // arc radius var startangle = 0; // starting point on circle var endangle = math.pi*(2-j/2); // end point on circle var anticlockwise = i%2==0 ? false : true; // clockwise or anticlockwise ctx.arc(x,y,radius,startangle,endangle, anticlockwise); if (i>1){ ctx.fill(); } else { ctx.stroke(); } } }
以上就是canvas游戏开发学习之二：绘制基本图形的内容。