从零开始说Canvas技术(3) canvas原理

上回我们说到如何使用JavaScript配合Canvas技术实现交互功能，本片文章我们要来讲讲Canvas技术中的线条。由于它的英文名称叫做Path，所以更准确地应该叫做路径，不过其实就是线条。

Canvas技术能绘制的路径主要由直线、弧线和贝塞尔曲线构成。在画路径之前，需要调用上下文对象的beginPath()方法，结束路径的绘制需要调用上下文对象的closePath()方法，否则调用clearRect()方法时，这条路径将不会被删除。所有的画路径的操作都需要在这两行代码之中。从beginPath()到closePath()绘制的图形称为一条路径。

I. 直线

调用上下文对象的moveTo()方法，将画笔移动到该坐标，lineTo()将以直线方式设置线条的第二个点，上下文对象的stroke()方法，将会把该条路径中所有的点都按指定的方式来连接，例如以下代码就是先将画笔移动到(0,0)坐标处，然后按直线方式设置接下来的一个点(30,30)，其次把这两个点按直线方式连接起来，所以最终效果就是绘制一条斜着的直线：

我们可以修改我们上回程序中的代码，看看这些代码的效果。

通过设置上下文对象的strokeStyle和lineWidth属性可以设置线条的颜色和宽度，例如：

这段代码就设置了线条颜色为橘色、线条宽度为5像素。

通过直线，我们可以画出三角形、矩形和多边形。这里以三角形为例，我们只要指定三个能够成三角形的顶点，然后按直线方式连接起来即可，例如：

我们从(0,0)开始，绘制直线到(30,30)，然后绘制直线到(30,0)，然后在绘制直线回到起点，这就构成了一个三角形，这个三角形构成了一个封闭图形，构成封闭图形的路径可以使用上下文对象的fill()方法来对图形的内部进行填充，例如：

II. 弧线

弧线最大的用处莫过于画圆、扇形和圆角矩形了。首先，我们来介绍一下上下文对象的arc()函数。该函数用于画弧线，它有六个参数，第一、二、三个参数分别是该弧线所在圆的x、y左边和半径，第四和第五个参数是这个圆的起始角和结束角，单位为弧度，PI是180度，第六个参数是可选参数，指定是逆时针还是顺时针绘制，false代表顺时针绘制，true代表逆时针绘制，默认是顺时针绘制，不过如果画圆的话，顺时针和逆时针的效果其实差不多，因为圆无论怎么看都是一样的。

我们知道，圆的起始角是0，结束角是2PI，所以我们可以这样画圆：

画扇形，我们可以使用弧线和直线的组合，例如：

绘制圆角矩形，就要用到arcTo()函数了，它也是上下文对象的一个方法，它有五个参数分别是弧线的起点（两条线的延长线的交点）的x坐标、y坐标，弧线的终点的x、y坐标和弧线的半径，例如以下就画了一个圆角矩形的两条边和一个圆角：

再添加一些代码，那么就可以画出一个圆角矩形了，例如下述代码：

III.文本

在制作文字冒险类游戏或者RPG游戏的时候，总会有这样一种需求：在圆角矩形中输出文本，上面我们说了如何画圆角矩形，那么如何输出文本呢？我们可以使用上下文对象的strokeText()方法或者fillText()方法。区别就是前者绘制的是只有轮廓的文本，后者绘制的是填充的文本，例如：

就绘制了一个只有轮廓的文本，它的第一个参数是要绘制的文本，后两个参数是这个文本左下角的x、y坐标。和直线、弧线不同，strokeText()方法不需要放在beginPath()和closePath()之间。又如：

就绘制了一个填充文本，它的参数和strokeText()的参数是一样的。

通过设置上下文对象的fillStyle属性可以指定填充文本的颜色，设置strokeStyle属性可以设置轮廓文本的颜色。通过设置上下文对象的font属性可以设置文本的大小和字体，例如：

就设置了文本的大小为20px，字体为Arial。

关于贝塞尔曲线，敬请期待本系列的下下篇。下篇将会讲述如何使用Canvas技术画一个倒福。