首先提下非零环绕原则，如下图：
这里如上面的图，这个非零环绕和画图的方向有关！
如+1要染色的地方，在这里找一个点射向外边，如果相交的地方画图方向和射线方向一样就是+1，要染色。
+2那个地方，也是那样。
0为不染色，因为一个+1一个-1，只要不是0就要染色，这就是非零环绕原则。
下面给出两个实例
程序运行截图如下：
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.arc(400, 400, 300, 0, Math.PI * 2, false);context.arc(400, 400, 150, 0, Math.PI * 2, true);context.fillStyle = "#058";context.shadowColor = "gray";context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur = 10;context.fill();}</script></body></html>
第二个实例运行截图如下；
源码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><canvas id="canvas" style="border: 1px solid #aaa; display: block; margin: 50px auto;">当前浏览器不支持canvas</canvas><script>window.onload = function(){let canvas = document.getElementById("canvas");canvas.width = 800;canvas.height = 800;let context = canvas.getContext("2d");context.beginPath();context.rect(100, 100, 600, 600);pathRect(context, 200, 200, 400, 200);pathTriangle(context, 300, 450, 150, 650, 450, 650);context.arc(550, 550, 100, 0, Math.PI * 2, true);context.closePath();context.fillStyle = "#058";context.shadowColor = "gray";context.shadowOffsetX = 10;context.shadowOffsetY = 10;context.shadowBlur = 10;context.fill();}function pathRect(cxt, x, y, width, height){cxt.moveTo(x, y);cxt.lineTo(x, y + height);cxt.lineTo(x + width, y + height);cxt.lineTo(x + width, y);cxt.lineTo(x, y);}function pathTriangle(cxt, x1, y1, x2, y2, x3, y3){cxt.moveTo(x1, y1);cxt.lineTo(x2, y2);cxt.lineTo(x3, y3);cxt.lineTo(x1, y1);}</script></body></html>
如果觉得《canvas笔记-非零环绕原则及剪纸实例》对你有帮助，请点赞、收藏，并留下你的观点哦！
