Canvas 填充路径 fill() - Canvas 基础教程

前面章节中我们知道了如何绘制各种路径，如果路径是闭合的 (调用了 closePath() 方法)，那么还可以使用特定的颜色来填充它

fill() 方法

fill() 方法根据当前的填充样式，填充当前或已存在的路径，可选的填充方法有非零环绕或者奇偶环绕

void ctx.fill();
void ctx.fill(fillRule);
void ctx.fill(path, fillRule);

参数	说明
fillRule	一种算法，决定点是在路径内还是在路径外，允许的值： "nonzero": 非零环绕规则，默认的规则 "evenodd": 奇偶环绕规则
path	可选，需要填充的 `Path2D` 路径

非零环绕或者奇偶环绕

当路径非常复杂时，怎么个复杂法呢，就是纵横交错，比如下面张路径

非零环绕填充方式如下

奇偶环绕填充方式如下

范例

下面的范例绘画了一个绿色的三角形

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="400" height="300">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.fillStyle="green"

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.lineTo(120,120);
ctx.closePath();
ctx.fill();
ctx.stroke();
</script>

运行结果如下

注意

可以从上图中看到，填充的时候只是填充内部，边框还是存在的，这就是路径绘图与其它方法的不同