HTML5 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 所示：

图4-3 描边和填充效果

如果在绘制第二个矩形时，不调用beginPath()方法，结果会怎样呢？我们先看看运行效果，如图 4‑4 所示：

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

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

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

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

HTML5 canvas中使用路径相关推荐

html5创建三次贝塞尔曲线,HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线: 复制代码代码如下: context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) c ...
html5怎么转换,HTML5 canvas中的转换方法
转换方法 scale(scalewidth,scaleheight) 缩放当前绘图至更大或更小 scalewidth 缩放当前绘图的宽度 (1=100%, ...
用html5做淡出淡入效果,在Html5 canvas中淡入淡出
我已经有了一个图像的画布,我想淡入淡出图像不断.我已经使用上面的代码:在Html5 canvas中淡入淡出 var canvas; var context; var ga = 0.0; var tim ...
HTML1个像素宽的代码,HTML5 Canvas中绘制一个像素宽的细线实现代码详情
正统的HTML5 Canvas中如下代码ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(10, 100); ctx.lineTo(300,100); ct ...
html5中阴影,HTML5 Canvas 中的颜色、样式和阴影的属性和方法
颜色.样式和阴影的属性与方法 fillStyle 设置或返回用于填充绘画的颜色.渐变或模式 strokeStyle 设置或返回用于笔触的颜色.渐变或模式 ...
HTML5 Canvas中 fillText() 和 strokeText() 的区别
前言 Canvas现在越来越多地被运用到我们的项目中了,所以对Canvas的研究也得跟上呀,不然就被时代抛弃了.这次要给大家分享的是 HTML5 Canvas 中的 fillText 和 stroke ...
html5画椭圆的完整代码,HTML5 Canvas中绘制椭圆的4种方法
概述 HTML5中的Canvas并没有直接提供绘制椭圆的方法,下面是对几种绘制方法的总结.各种方法各有优缺,视情况选用.各方法的参数相同: 1.context为Canvas的2D绘图环境对象, 2.x ...
html5绘制矩形动画,HTML5 Canvas中绘制矩形实例
本文翻译自Steve Fulton & Jeff Fulton HTML5 Canvas, Chapter 2, "The Basic Rectangle Shape". ...
html坐标绘制路径,HTML5 CANVAS：绘制路径
一条HTML5 canvas路径是通过绘制指令来连接一系列的点,由这一系列的点构成直线或曲线.路径可以用于在HTML5 canvas上绘制各种类型的图形:直线.圆形.多边形等等.路径的绘制是canva ...

HTML5 canvas中使用路径

如何使用路径

HTML5 canvas中使用路径相关推荐

最新文章

热门文章