共计 1483 个字符，预计需要花费 4 分钟才能阅读完成。
1. 场景形容
在我的业务需要中，有一个性能是实现套索，并且用户陷阱的局部如果为偶数次则默认用户不须要该偶数次的内容。如下图：
画图步骤：第一步先画外圈（较大），第二步画内圈（较小）即相似于同心圆。那么第二个圆为偶数次填充则默认用户不须要。
2. 置信大家都看过很多预设的图像应用奇偶规定填充的案例了：如下
“非零盘绕”与“奇偶准则”
然而这个并不是我的业务场景所须要用到的，我的需要是通过笔触的绘画（即未知渲染点），将二次绘制的局部应用奇偶准则。
3. API 应用和参考：
参考链接：fill(path,fillRule)
对于 path2D 的应用，在下面的链接中也有提到过。
4. 代码展现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {margin: 0;}
</style>
</head>
<body>
<canvas id="haha"></canvas>
</body>
<script>
const canvas = document.getElementById('haha');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight - 5;
const ctx = canvas.getContext('2d');
var points = [];
var paths = [];
var drawNow = false;
const draw = () => {paths = [];
for (var i = 0; i < points.length; i++) {if (i == 0) {paths[i] = new Path2D();} else {paths[i] = new Path2D(paths[i - 1]);
}
paths[i].moveTo(points[i][0].x, points[i][0].y);
for (var j = 1; j < points[i].length; j++) {paths[i].lineTo(points[i][j].x, points[i][j].y);
}
}
ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "green";
ctx.fill(paths[paths.length - 1], 'evenodd')
ctx.stroke(paths[paths.length - 1]);
}
canvas.onmousedown = function (e) {
drawNow = true;
points.push([]);
points[points.length - 1].push({x: e.clientX, y: e.clientY});
canvas.onmousemove = function (e) {if (drawNow) {points[points.length - 1].push({x: e.clientX, y: e.clientY});
draw();}
};
canvas.onmouseup = function () {drawNow = false;};
};
</script>
</html>
正文完