JS Canvas - 填充豆形多边形

Question

我在JS canvas void arrToStringAssertWhenContainZero(char sArr[]) { for (size_t i = 0; i < strlen(sArr); i++) { assert(sArr[i] != '0'); cout << sArr[i]; } } 填充多边形外部时遇到问题。

以下是我的代码的工作原理：

ctx.fill()

以下是for循环：

ctx.beginPath()
// Here are for loops that draws a the closed shape using
ctx.stroke();
ctx.fill();

因此第一个for循环绘制形状的外侧，第二个for循环绘制内侧。然后var sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2; for(var i = 0; i < n; i += Math.floor(n/steps)){ var radius = Math.exp(-2*i/n)*rmax+rmin; radius += frequencyData[i]/255*(n-i + 200)/n*50; var angle = -Math.PI/2 - i/n*2*Math.PI; var x = radius*Math.cos(angle) + w/2+rmin/2; var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset; if (i == 0) { gctx.moveTo(x,y); sx1 = x; sy1 = y; }else if (i == n-1){ ex1 = x; ey1 = y; }else{ gctx.lineTo(x,y); } spd += frequencyData[i]; } for(var i = 0; i < n; i += Math.floor(n/steps)){ var radius = Math.exp(-2*i/n)*rmax+rmin; radius -= frequencyData[i]/255*(n-i + 200)/n*50; var angle = -Math.PI/2 - i/n*2*Math.PI; var x = radius*Math.cos(angle) + w/2+rmin/2; var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset; if (i == 0) { gctx.moveTo(x,y); }else if (i == 20){ sx2 = x; sy2 = y; }else if (i == n-1){ ex2 = x; ey2 = y; } else { gctx.lineTo(x,y); } } gctx.moveTo(sx1, sy1); gctx.lineTo(sx2, sy2); gctx.moveTo(ex1, ey1); gctx.lineTo(ex2, ey2); 变量在这里确保在最后4行中，它关闭形状（通过在外线和内线之间添加垂直线）。也许这个问题发生是因为我以不寻常的顺序绘制线条？ （比如从2条水平线开始绘制一个矩形，然后添加2条垂直线） 这是我在sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2之后得到的：

这就是我想要的：

那么你能指导我如何实现这个目标吗？

Answer 1

好的我通过使第二个循环按照与此相反的顺序进行修复：for (var i = n-1; i >= 0; i -= Math.floor(n/steps))因此它以更常规的顺序绘制多边形并且有效！我甚至不需要使用最后4行来关闭它，这就是我想要的，这太棒了！