canvas ctx.fill() 规则和玩法大揭秘：fill()的那些坑

2023-06-01 12:12:39

Canvas 绘图中的填充规则：非零绕组 vs. 奇偶绕组

前言

想象一下，你是一位艺术家，手里拿着一块空白的画布。当你想用颜色填充一个形状时，你可能会潜意识地采用一种特定的填充方式，这决定了哪些区域被填充，哪些区域不被填充。在 Canvas 绘图中，这种填充方式是由 fillRule 参数控制的，它有两种选择：非零绕组原则和奇偶绕组原则。让我们深入了解这两种规则，以及它们在填充复杂形状时的不同之处。

非零绕组原则

非零绕组原则是一种直观的填充方法，它认为如果一个点绕着一个封闭的路径或形状顺时针绕行时，绕行的圈数超过逆时针绕行的圈数，那么该点就在填充区域内。否则，该点就不在填充区域内。

奇偶绕组原则

奇偶绕组原则是一种更复杂的填充方法，它认为如果一个点绕着一个封闭的路径或形状顺时针绕行时，绕行的圈数与逆时针绕行的圈数相等，那么该点就在填充区域内。否则，该点就不在填充区域内。

两种填充规则的差异

非零绕组原则和奇偶绕组原则的区别体现在填充自相交的路径或形状时。自相交的形状是指路径或形状本身与自身相交。当使用非零绕组原则填充自相交的形状时，自相交的部分将被填充为实心。另一方面，当使用奇偶绕组原则时，自相交的部分将被填充为空心。

代码示例

以下 Canvas 代码示例展示了非零绕组原则和奇偶绕组原则之间的差异：

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

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

// 奇偶绕组原则
ctx.fillStyle = 'blue';
ctx.fillRule = 'evenodd';
ctx.beginPath();
ctx.moveTo(200, 50);
ctx.lineTo(250, 50);
ctx.lineTo(250, 150);
ctx.lineTo(200, 150);
ctx.lineTo(200, 100);
ctx.lineTo(225, 100);
ctx.lineTo(225, 50);
ctx.closePath();
ctx.fill();