填充僞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時，你正在創造一條新路，你的最長路徑只有一條線段）

如果我們只畫出三條線，這樣的：

有沒有「面子」，以填補那裏，你需要重新組織代碼，直到你繪製的差異平方的面一下子，讓你有什麼實際填寫。