当前位置: 代码迷 >> JavaScript >> HTML Canvas:Fill() 无法在控制台中正常工作且没有错误
  详细解决方案

HTML Canvas:Fill() 无法在控制台中正常工作且没有错误

热度:94   发布时间:2023-06-03 18:14:30.0

你好,我正在制作一个多边形,想把它填满。 但无论我尝试做什么,我似乎都无法让它发挥作用。

如果有人能指出我正确的方向,我将不胜感激。

 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>

您只需要在beginPath()之后对每个路径使用moveTo()一次,然后在此之后使用lineTo() for循环中完成所有lineTo()之后,您就可以执行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();


希望这可以帮助!

  相关解决方案