fillRect()与strokeRect()是对双胞胎，fillRect方法绘制一个矩形并填充一种颜色（本例以黑色为例），strokeRect方法绘制一个矩形并描边，也就是说矩形的轮廓有线条描边。当然你也可以在fillRect实例中改用strokeRect方法。

绘制一个描边的矩形

现在出现的是一个中空的矩形轮廓。

直线

直线与以上形状略有不同，他们实际上为路径。创建一个简单的路径，你必须首先在2D渲染上下文中调用beginPath方法，接着调用moveTo方法，设置我们即将绘制路径的起点坐标（X，Y）。最后调用closePath开始路径绘制，其参数（X，Y）指定了路径终点。示例代码如下：

context.beginPath(); // Start the path context.moveTo(40, 40); // Set the pathorigin context.lineTo(340, 40); // Set the pathdestination context.closePath(); // Close the path context.stroke(); // Outline the path

路径效果如图：

通过改变lineTo方法的参数（X，Y）可以实现直线的倾斜：

context.lineTo(340, 340);

圆

在画布上创建一个圈的方式远区别于创建一个矩形。圆是一个相当复杂的形状，甚至在Canvas中没有单独的方法调用来绘制。不过Canvas中提供了绘制圆弧的方法，而我们所要做的就是将弧的两端拼接。下面我们来看看如何在Canvas中绘制一个圆：

context.beginPath(); // Start the path context.arc(230, 90, 50, 0, Math.PI*2,false); // Draw a circle context.closePath(); // Close the path context.fill(); // Fill the path

第一个与最后两行分别是开启和关闭路径（弧）并填充。

其中共有六个参数，（X，Y）指定了圆弧原点的坐标（本例中圆的圆心），弧的半径，起始角度，终止角度以及一个布尔值（布尔值为true则逆时针绘制圆弧，反之顺时针）。Arc()方法中具体参数如下：

context.arc(x, y, radius, startAngle,endAngle, anticlockwise);

圆的绘制图示如下：

这里需要注意的是，角度的单位都为弧度，360度（一个完整的圆）为2π（圆周率乘以2）弧度。可以利用下面的公式完成弧度转换：

var degrees = 1; // 1 degree var radians = degrees * (Math.PI / 180); //0.0175 radians

度和弧度之间的转换

注意：在JavaScript中可以通过调用数学函数Math对象获取PI值，除此之外数学函数的作用也十分广泛，如我们后面即将提到的随机数生成。

运最后行这个实例，实际效果如下：

如果只是绘制一个半圆，很简单，只需将角度改为π，代码如下：

context.arc(230, 90, 50, 0, Math.PI,false); // Draw a semi-circle

如果一切顺利，应该有一个可爱的半圈，在您的浏览器。

Arc()中的第六个参数是可选的，不过在Firefox浏览器下，如果它被省略了则会抛出一个错误，所以在绘图时最好保留以明确定义绘制的方向。

样式

下面我们看看在本章开头提及的定义图形颜色的问题：

context.fillStyle = “rgb(255, 0,0)”; context.fillRect(40, 40, 100, 100);

通过设置2D渲染上下文中的FillStyle属性，能够实现改变图形和路径的填充色。在前面的实例中，分配了一个RGB（红，绿，蓝）颜色值，当然你也可以使用任何有效的十六进制代码形式的CSS颜色值（如＃FF0000或“red”）。在本例中颜色设置为全红（红色，没有绿色与蓝色），实际效果将会如下：

这样会有一个缺点，问题在于设置了FillStyle属性后就意味着你之后的一切图形绘制都会按该颜色方案执行。当你只是想改变其中一个对象的颜色，需在完成绘制后将FillStyle属性设置为黑色（或另外某颜色），如下列代码所示：

context.fillStyle = “rgb(255, 0,0)”; context.fillRect(40, 40, 100, 100); // Redsquare context.fillRect(180, 40, 100, 100); // Redsquare context.fillStyle = “rgb(0, 0,0)”; context.fillRect(320, 40, 100, 100); //Black square

在浏览器中的效果为：

同样你也可以通过使用strokeStyle属性勾勒图形和路径，例如，下面用stroke代替本例中的fill：

context.strokeStyle = “rgb(255, 0,0)”; context.strokeRect(40, 40, 100, 100); //Red square context.strokeRect(180, 40, 100, 100); //Red square context.strokeStyle = “rgb(0, 0,0)”; context.strokeRect(320, 40, 100, 100); //Black square

注：当然也可以同时使用fillStyle与strokeStyle属性，就绘制出填充与轮廓颜色截然不同的图形。