JS Canvas - 填充一个豆形多边形答案

【问题标题】：JS Canvas - Filling a bean-shaped polygonJS Canvas - 填充一个豆形多边形
【发布时间】：2018-03-31 14:54:08
【问题描述】：

我的 JS 画布 ctx.fill() 填充到我的多边形之外时遇到问题。

我的代码是这样工作的：

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

这里是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);

所以第一个 for 循环绘制形状的外侧，第二个 for 循环绘制内侧。然后 sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2 变量在这里确保在最后 4 行中，它关闭了形状（通过在外线和内线之间添加垂直线）。也许这个问题发生是因为我以不寻常的顺序绘制线条？（就像从 2 条水平线开始绘制一个矩形，然后添加 2 条垂直线）这是我在fill() 之后得到的：

这就是我想要的：

那么您能指导我如何实现这一目标吗？

【问题讨论】：

可以包含for循环吗？
@bugs 当然，我刚刚做到了

标签： javascript html5-canvas polygon

【解决方案1】：

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

【讨论】：