SVG和Canvas填充规则：非零与奇偶，让你轻松掌控绘图细节

前端

2023-10-31 11:34:20

SVG和Canvas中的填充规则：破解图形内部奥秘

当我们使用SVG或Canvas绘制图形时，填充规则扮演着至关重要的角色，它决定了图形内部区域如何渲染。了解这些规则非常重要，因为它们可以极大地影响你的最终设计结果。

填充规则的类型

在SVG和Canvas中，有两种主要的填充规则：非零规则和奇偶规则。它们各有优缺点，具体使用哪种规则取决于你想要实现的效果。

1. 非零规则

想象一下，你正沿着一个图形的边缘顺时针绕圈。根据非零规则，如果你遇到的相交点总数为非零（也就是奇数或偶数但不为0），那么你所绕圈的部分就在图形内部。

举个例子，一个顺时针绘制的三角形，其内部将被填充。然而，一个逆时针绘制的三角形，其内部将不会被填充。

2. 奇偶规则

奇偶规则与非零规则类似，但它考虑的不是相交点的总数，而是奇偶性。如果你遇到的相交点总数为奇数，那么你所绕圈的部分就在图形内部。

回到三角形示例，无论是顺时针还是逆时针绘制，奇偶规则都会将三角形内部填充。

填充规则的选择

在SVG和Canvas中，你可以通过设置 fill-rule 属性来选择填充规则。具体设置方法如下：

1. SVG

<path fill-rule="nonzero" />
<path fill-rule="evenodd" />

2. Canvas

ctx.fillRule = "nonzero";
ctx.fillRule = "evenodd";

哪个填充规则更适合我？

非零规则和奇偶规则都会产生不同的效果，哪种规则更适合你取决于你的具体需求。

非零规则 通常适用于大多数情况，但它可能会导致重叠图形之间出现间隙。
奇偶规则 可以避免非零规则产生的间隙问题，但它可能会导致重叠图形之间出现重叠区域。

代码示例

下面的代码示例展示了非零规则和奇偶规则在SVG和Canvas中的实际应用：

SVG

<svg width="200px" height="200px">
  <path d="M50 50 L150 50 L150 150 Z" fill="red" fill-rule="nonzero" />
  <path d="M50 50 L150 50 L150 150 Z" fill="blue" fill-rule="evenodd" />
</svg>

Canvas

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 非零规则
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fillRule = 'nonzero';
ctx.fill();

// 奇偶规则
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fillRule = 'evenodd';
ctx.fill();