用HTML5画布绘制非规则图形的非零包围原理

路径方向与非零包围原理
通常，我们画的画都是规则的。如果我们用线条画抽象作品，就像下面的图画一样，孩子们知道如何用填充（）染色吗
在这里，我们将使用一种数学方法，mdash；mdash；非零环绕的原则，确定区域内和区域外。接下来，让我们看看原理的非零环绕是什么。
首先，我们要确定图形的路径，只要中风和没有重复的路线；它是好的。例如，一路的方向标。让我们先假设路径的正方向是1（事实上，1也可以用，正面和负面的方向是相反的数字，而不是0），然后向相反的方向是相反的号码1。
然后以任意射线在任何地区的子路径切割。这里我们仅以三个区域的光线为例来确定这三个区域是外面还是外面。
接下来，我们来判断，光线来自S1与S1的子路径的正方向，然后我们给柜台+ 1，结果是1，在外面。
来自S2的射线L2相交于两个子路径的正方向，计数器+ 2，结果为+ 2，在外部。
来自S3的射线L3相交于两条路径，但有一个相反的方向，计数器+ 1-1，其结果是0。是的，只要结果不是0，射线所在的区域就在外面。
甜甜圈
你还记得弧法吗最后一个参数是判断的方向。如果在相反的路径上有两个同心圆，这幅画的神奇效果是什么
在这里，我们通过代码。

Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

戒指

体{背景：URL（， /图像/ BG3 .webp）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

context.shadowcolor =# 545454 ；
context.shadowoffsetx = 5；
context.shadowoffsety = 5；
context.shadowblur = 2；

context.arc（400, 300, 200，0，math.pi×2，假）；
context.arc（400, 300, 230，0，math.pi×2，真的）；
context.fillstyle =# 00aaaa ；
Context.fill（）；
}；

运行结果：
镂空剪纸效果
其次，我们使用非零包围原理和阴影来画出镂空的剪纸效果。
Javaｓｃｒｉｐｔ代码将内容复制到剪贴板。

镂空剪纸效果

体{背景：URL（， /图像/ BG3 .webp）重复；}
#帆布{ border: 1px solid # aaaaaa；显示：块；保证金：50px汽车；}
你的浏览器不支持画布让我们换一个！

在window.onload =函数（）{
VaR的画布document.getelementbyid（画布）；
canvas.width = 800；
canvas.height = 600；
VaR上下文= canvas.getcontext（2D）；
context.fillstyle =# FFF；
（00800600）context.fillrect；

Context.beginPath（）；
（200100400400）context.rect；
drawpathrect（背景，250, 150, 300，150）；
DrawPathTriangle（背景，345, 350, 420，450, 270, 450）；
context.arc（500, 400, 50，0，math.pi×2，真的）；
Context.closePath（）；

context.fillstyle =# 058 ；
context.shadowcolor =灰色；
context.shadowoffsetx = 10；
context.shadowoffsety = 10；
context.shadowblur = 10；
Context.fill（）；

}；

绘制一个矩形逆时针方向
功能drawpathrect（CXT，X，Y，W，H）{

*没有使用调用和closepath这里，
*否则不属于另一个新的路径的子路径，
*非零环绕原则不能使用。
* /
Cxt.moveTo（x，y）；
Cxt.lineTo（X，Y + H）；
Cxt.lineTo（X + Y + W，H）；
Cxt.lineTo（x + W，Y）；
Cxt.lineTo（x，y）；

}

绘制/逆时针三角形
功能drawpathtriangle（CXT，X1，Y1，Y2，X2，X3，Y3）{
Cxt.moveTo（x1，y1）；
Cxt.lineTo（X3，Y3）；
Cxt.lineTo（x2，y2）；
Cxt.lineTo（x1，y1）；
}
运行结果：
手工绘制矩形在这里的原因是，我们想得到一个逆时针方向的路径矩形和矩形（）API提供的方法是顺时针绘制的。另外，需要注意的是，剪纸是一个图形和路径的重要。我们不能使用调用（）和（）在closepath绘制空心三角形和画空心矩形。否则，它们将是新的路径和新的图形，而不是子路径和子图的剪纸，所以我们不能使用的原则，非零环绕。