填充伪3D画布形状

Question

目前我正在使用canvas 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时，您都会创建一条新路径。您最长的路径只是一个线段）

如果我们只选择绘制三条线，我们会得到类似的结果：

没有“面子”可以填充，你需要重新组织你的代码，直到你一次性绘制正方形的差异面，这样你就可以实际填充。