为什么我的JavaScript /画布多边形无法填充？

Question

因此，我创建了一个程序，该程序将从本地网络服务器获取美国坐标列表。 客户端可以通过发出简单的GET请求来获取这些坐标。 我试图逐个填写州，但是这似乎不起作用。 我填写这些的代码如下

ctx.fillStyle= "#f00";
//coords holds an array of JSON objects, which store an array of coordinates under the 'coords' tag. These coordinates are stored in an array, which holds [x,y].
for (var i=0; i<coords.length; i++){
            obj = coords[i]['coords'];
//Begin the path
            ctx.beginPath();
            for (var j=0; j<obj.length; j++){
//Draw each point on the path
                if (j!=obj.length-1){
                    ctx.moveTo(obj[j][0],obj[j][1])
                    ctx.lineTo(obj[j+1][0],obj[j+1][1])
                }
            }
//Close the path
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
        }

由于某些原因，这不能满足要求。 它会用黑色轮廓绘制它们，但填充不会发生。 我已经将数据汇总了，可以在这里找到。 https://gist.github.com/ollien/44119f42187ec21ae2c8

谢谢！

Answer 1

每次执行moveTo时，都将“断开”曲线。 我建议您首先仅使用moveTo，然后仅使用lineTo：

ctx.fillStyle= "#f00";
//coords holds an array of JSON objects, which store an array of coordinates under the 'coords' tag. These coordinates are stored in an array, which holds [x,y].
for (var i=0; i<coords.length; i++){
     obj = coords[i]['coords'];
     drawObj(obj);
}

将drawObj定义为：

function drawObj(obj) {
         if (obj.length<2) return;
         ctx.beginPath();
         var currObj = obj[0];
         ctx.moveTo(currObj[0], currObj[1]);
         for (var j=1; j<obj.length; j++){
             currObj = =obj[j]
             ctx.lineTo(currObj[0],currObj[1])
         }
         ctx.closePath();
         ctx.fill();
         ctx.stroke();
}