【绘制】HTML5 Canvas 中路径(path)、描边(stroke)与填充(fill)详细介绍(图文、代码示例)

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

目录

引入

案例

介绍

在线演示

效果图

代码

路径

子路径 

填充路径中的“非零环绕规则”

“非零环绕规则”的判断过程

引入

至今为止，我们所绘制的唯一图形，就是通过strokeRect()绘制矩形，也使用fillRect()进行填充。这两个方法都是立即生效的，的。

立即生效的Canvas API中的方法：

• strokeRect()
• fillRect()
• strokeText()
• fillText()

绘图环境中，可以绘制更为复杂的图形，如贝塞尔曲线等，这些方法都是基于路径(path)的。

大多数绘制系统，如SVG、Apple的Cocoa框架、Adobe illustrator等，都是基于路径的，使用这些绘制系统时，都是先定义一个路径，然后对其描边或填充。图示演示了三种绘制方式（描边、填充、描边和填充）。

案例

介绍

分别用矩形、开放路径、闭合路径演示三种不同的绘制方式。

在线演示

https://827652549.github.io/Canvas/Unit2/PathStrokeFill.html

效果图

闭合路径的代码实现比开放路径多写了一条closePath，用于将此时的路径从当前点回到起点。

代码

https://github.com/827652549/CanvasStudy/blob/master/Unit2/PathStrokeFill.html

路径

路径与隐形墨水

这是一个恰当对比喻，用来说明“创建路径随后对其进行描边或填充”，我们将这个操作比作“使用隐形墨水来绘图”。

你用隐形墨水所控制对内容不会立即显示出来，但你可以调节隐形墨水的颜色，笔尖宽度等等，最后用“特殊的方法（fill或stroke）”将图像显示出来。

子路径 

在某一时刻，canvas之中只能有一条路径存在，Canvas规范将其称为“当前路径（current path）”，这条路径可以包含很多子路径（subpath）：有两个或更多的点组成。

为了理解什么是子路径，我们先来看一段代码：

context.beginPath();context.rect(10,10,100,100);
context.stroke();context.beginPath();context.rect(30,30,100,100);
context.stroke();

首先调用一次beginPath()开启一段新路径，该方法会将当前路径中所有子路径都清除掉，然后调用rect()方法，该方法向当前路径中添加了一个含有4个点的子路径，最后调用stroke()方法描边显形。

接下来再次调用了beginPath()方法，清除了上次调用rect()方法所创建的子路径（指那个矩形路径），然后再添加了另一个矩形子路径，最后进行描边显形。

如果我们第二次不调用beginPath()方法，那么此时路径便有两个矩形，那么第二次stroke()时便又会重新绘制一遍第一个矩形。当然，我们也可以同时删除第一个stroke()和第二个beginPath()来达到同样的效果，但为了让你理解，我有意这么做。

个人认为，子路径（subpath）不应该这么翻译，容易与继承关系中的“父子”中的“子”混淆，在Canvas这个应用场景中，被翻译成“补充路径”应该更容易理解。个人愚见，还请多指教。

填充路径中的“非零环绕规则”

如果当路径是循环的，或者包含多个相交的子路径，那fill()就会按照“非零环绕规则（nonzero winding rule）”来判断填充哪些区域。

“非零环绕规则”的判断过程

1. 对于路径中的任意给定区域，在区域内画一条足够长的线段，使线段终点完全落于路径范围之外。（图中三个箭头表示此过程）
2. 计数器初始化为0，对于每一条线段来说，每当线段与路径顺时针部分相交时+1，与路径逆时针部分相交时-1。
3. 如果计数器最终值不是0，则证明在内部，如果是0，则证明在外部。仅填充在内部的区域。

以上图为例

上箭头与逆时针相交，计数器结果-1，填充；

右箭头与两个逆时针相交，结果-2，填充；

左箭头同时与一个顺时针和逆时针路径相交，结果为0，不填充。