Question

我在HTML5画布中制作一个简单的多边形绘制方法。它会成功地勾勒出形状，但它不会填充它，即使它被指示：

function PhysicsObj(Position /*Vector*/,Vertices /*Vector Array*/)
        {
            this.Position = Position
            this.Vertices = Vertices
            this.Velocity = new Vector(0,0);
            this.Colour = "rgb(100,100,100)";

            this.draw = function()
            {
                ctx.beginPath();
                for(var point=0; point<Vertices.length-1; point++)
                {
                    ctx.moveTo(Vertices[point].X+Position.X,Vertices[point].Y+Position.Y);
                    ctx.lineTo(Vertices[point+1].X+Position.X,Vertices[point+1].Y+Position.Y);
                }
                ctx.moveTo(Vertices[point].X+Position.X,Vertices[point].Y+Position.Y);
                ctx.lineTo(Vertices[0].X+Position.X,Vertices[0].Y+Position.Y);
                ctx.closePath();
                ctx.fillStyle = this.Colour;
                ctx.fill();
                ctx.strokeStyle = this.Colour;
                ctx.stroke();
            }
        }

        var Polygon = new PhysicsObj(new Vector(100,100),[new Vector(50,50),new Vector(-50,50), new Vector(0,125)]);
        Polygon.draw();

该方法只需要几个顶点，并将它们连接到一个路径中。它根本不会填补;我无法弄清楚如何使用填充方法。

Answer 1

消除额外的moveTo命令：

var PositionX=50;
var PositionY=50;

var Vertices=[
    {X:10,Y:10},
    {X:100,Y:10},
    {X:50,Y:50}
];

ctx.beginPath();
ctx.moveTo(Vertices[0].X+PositionX,Vertices[0].Y+PositionY);
for(var point=1; point<Vertices.length; point++)
{
    ctx.lineTo(Vertices[point].X+PositionX,Vertices[point].Y+PositionY);
}
ctx.lineTo(Vertices[0].X+PositionX,Vertices[0].Y+PositionY);
ctx.closePath();
ctx.fillStyle = "red";
ctx.fill();
ctx.strokeStyle = "black";
ctx.stroke();

CanvasRenderingContext2D.fill（）似乎不起作用

1 个答案: