canvas - 填充伪 3D 画布形状

Question

目前我正在使用画布 2d 上下文中的伪 3D 形状。然而，我仍然坚持填充形状的侧面。

这是我写的绘图函数：

Shape.prototype.draw = function (ctx) {
    var offsetX = ctx.canvas.width / 2;
    var offsetY = ctx.canvas.height / 2;

    var i = this.edges.length;
    while (i--) {
        var vertex1 = this.rotatedVertexs[ this.edges[i][0] ];
        var vertex2 = this.rotatedVertexs[ this.edges[i][1] ];

        ctx.beginPath();
        ctx.moveTo(vertex1[0] + offsetX, vertex1[1] + offsetY);
        ctx.lineTo(vertex2[0] + offsetX, vertex2[1] + offsetY);
        ctx.fill();
        ctx.stroke();
    }
};

...和一个简单的小提琴示例：http: //jsfiddle.net/ARTsinn/xYZyU/

任何想法我做错了什么？

Answer 1

您的绘图功能适用于“线条”，而不是正方形的“面”。

你不能填满一行。您需要在同一路径中至少有两条线来创建可填充区域。（请注意，每次您打电话beginPath时，您都在制作一条新路径。您最长的路径只有一条线段）

如果我们只画你有的三条线，我们会得到这样的东西：

那里没有要填充的“面”，你需要重新组织你的代码，直到你一次绘制正方形的不同面，这样你就可以实际填充一些东西。