HTML Canvas: Fill () не работает без ошибок в консоли

Question

Здравствуйте, я делаю многоугольник и хочу его заполнить.Но что бы я ни пытался сделать, я не могу заставить его работать.

Если кто-то может указать мне правильное направление, я ценю это.

https://jsfiddle.net/ygesj1do/4/

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
op = {
  "pts": [{
    "x": 40,
    "y": 13.5
  }, {
    "x": 60,
    "y": 27.75
  }, {
    "x": 60,
    "y": 56.25
  }, {
    "x": 40,
    "y": 70.5
  }, {
    "x": 20,
    "y": 56.25
  }, {
    "x": 20,
    "y": 27.75
  }],
  "color": "#00F",
  "fillcolor": "#FF0000",
  "lineWidth": 1
};

ctx.save();
ctx.strokeStyle = op.color;
ctx.fillStyle = op.fillcolor;
ctx.lineWidth = op.lineWidth;
ctx.beginPath();

for (i = 1; i <= op.pts.length; i++) {
  if (i == op.pts.length) {
    ctx.moveTo(op.pts[i - 1].x, op.pts[i - 1].y);
    ctx.lineTo(op.pts[0].x, op.pts[0].y);
  } else {
    ctx.moveTo(op.pts[i - 1].x, op.pts[i - 1].y);
    ctx.lineTo(op.pts[i].x, op.pts[i].y);
  }
}

ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.restore();

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

Answer 1

Вам нужно использовать moveTo() только один раз для каждого пути после beginPath(), затем просто используйте lineTo() после этого.Как только вы выполните все действия lineTo() в цикле for, вы можете выполнить ctx.fill(), чтобы заставить его работать.

Вот обновленная часть кода:

/* set moveTo() once before for loop */
ctx.moveTo(op.pts[0].x,op.pts[0].y);



/*then in the for loop just use lineTo(), using lineTo() will keep track of the last endpoint on the current path so you don't need to use moveTo() unless you are starting a new path.*/

        for (i=1;i<=op.pts.length;i++) {
            if (i==op.pts.length) {
                ctx.lineTo(op.pts[0].x,op.pts[0].y);
            } else {
                ctx.lineTo(op.pts[i].x,op.pts[i].y);
            }
        }

/* now the following will work */
    ctx.closePath();
    ctx.fill();

Надеюсь, это поможет!