欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

HTML5 canvas中使用路径的方法教程

程序员文章站 2023-02-19 22:33:59
 如何使用路径 在canvas中绘图,其实就是先按照一定顺序定义一些坐标点,再通过指定的方式,用画笔将这些坐标点连接起来,就形成我们所需要的图形。 canvas中的所有基本图形,包括线段、...

 如何使用路径

在canvas中绘图,其实就是先按照一定顺序定义一些坐标点,再通过指定的方式,用画笔将这些坐标点连接起来,就形成我们所需要的图形。

canvas中的所有基本图形,包括线段、矩形、圆弧、贝塞尔曲线等,都是基于路径进行绘制的。

canvas中,把从绘制起点到绘制终点所经过的这些点,就称为路径。一个路径可以包含多个子路径,子路径又是由两个或多个点组成。在某一时刻,canvas中只能有一条路径存在,canvas规范把它称为“当前路径”。使用路径时,绘制图形的一般步骤为:

调用beginpath()方法开始一条新的路径。

调用moveto(x, y)方法以(x, y)为起点开始一条新的子路径,并把画笔移动到该起点。

定义子路径的内容。如,rect()方法定义矩形路径,arc()方法定义圆弧路径,等等。

调用closepath()方法关闭路径,使该路径闭合。

每调用一次beginpath()方法,会新定义一条路径,该方法会把当前路径中的所有子路径全部清除;每调用一次moveto (x, y)方法,会新定义一条子路径。

说明:

在 canvas 中定义子路径,一般是不需要指定起点的。第一条子路径的默认起点是画布的原点,其它子路径的起点是上一次定义路径的终点。因此,只有在需要重新定义起点的时候,才要调用 moveto ()方法。

关闭路径就是把路径的起点自动作为终点,并把起点和终点用直线连接起来,形成一个闭合区域。如果不需要绘制封闭图形,则不必调用closepath()方法。

canvas中有几个特殊的方法,如rect()方法,被称作路径方法,它们会自动调用moveto()和closepath()方法。使用路径方法绘制图形时,可以省略步骤2和步骤4。

为了简单起见,下面举一个使用路径方法绘制两个矩形的例子,本章后面几节会给出使用moveto()和closepath()的实例。  

context.beginpath();

context.rect(50, 20, 120, 100);

context.stroke();

context.beginpath();

context.rect(220, 20, 120, 100);

context.fill();

上述代码通过调用beginpath()开始一条新路径,然后调用rect()方法向当前路径中增加一个包含4个点的子路径,最后调用stroke()方法,该路径进行描边,使其在画布中显示出来。

接下来,又一次调用beginpath()方法,该方法会清除上一次调用rect()方法创建的子路径,然后再调用rect()方法向当前路径中增加一个包含4个点的子路径,最后调用fill()方法,对该路径进行填充,使第二个矩形也在画布中显示出来。本例的运行效果如图 4‑3 所示:

HTML5 canvas中使用路径的方法教程

图4-3 描边和填充效果

如果在绘制第二个矩形时,不调用beginpath()方法,结果会怎样呢?我们先看看运行效果,如图 4-4 所示:

HTML5 canvas中使用路径的方法教程

图4-4 路径对绘图的影响

从上图可知,第一个矩形也是使用填充而不是描边的,为什么会这样呢?

因为canvas中的绘制方法,都是以上一次beginpath()之后的所有路径为基础进行绘制,因此每次开始绘制路径前,都要调用一次beginpath()方法,以通知canvas将要开始绘制一个新图形了。否则,之后添加的所有子路径都是添加在已有的子路径上,每次绘制,都会把之前的子路径重新绘制一遍。这样,不但影响绘图效果,还会严重影响性能。