形状未绘制到 canvas javascript

Question

我正在制作一个名为 Forge.js 的游戏引擎。 我在实体 class 中有一个多边形方法，它没有绘制形状。 它循环通过点并在每个点上画一条线。 然而，这些线没有被绘制出来。 帮助请

多边形法：

_polygon(points){
        const local_ctx = new Path2D()

        this.ctx.beginPath()

        var j = 3

        local_ctx.moveTo(points[0], points[1])
        
        for (var i=0; i<=points.length; i++){
            local_ctx.lineTo(points[i+2], points[i+j])

            j += 2

        }

        this.ctx.fillStyle = constants.COLORS.black
        this.ctx.fill()

    }

Answer 1

正如评论中所说，您需要将 Path2D object 传递给fill()以便上下文绘制它。
但这不是您的代码的唯一问题。

您的 for 循环可能没有达到您的预期：

 // Rewrote in order to log the indexes that are beign used in the loop var j = 3 console.log(0, 1) for (var i=0; i<=10; i++){ console.log(i+2, i+j) j += 2 }

通过利用空子路径不需要初始moveTo调用这一事实，您实际上可以大大简化此循环。 如果您的路径为空lineTo(x, y)会自动转换为moveTo(x, y) 。
因此，我们可以将所有点都视为相同，所有这些都在一个 for 循环中，只会将我们的索引增加 2。

 const constants = { COLORS: { BLACK: "#000" } }; const obj = { ctx: document.createElement("canvas").getContext("2d"), _polygon(points){ const local_ctx = new Path2D() // Since we're using a Path2D object we don't need to do anything // on the context's subpath // this.ctx.beginPath() for (var i=0; i<=points.length; i+=2){ local_ctx.lineTo(points[i], points[i+1]) } this.ctx.fillStyle = constants.COLORS.black this.ctx.fill(local_ctx) // fill the context using the Path2D object } }; document.body.append(obj.ctx.canvas); obj._polygon([13, 13, 13, 50, 50, 50]);