填充伪3D画布形状

问题描述：

目前我在画布2D上下文中使用伪3D形状。但是，我仍然坚持填充形状两侧。填充伪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/

任何想法我上来的错吗？

答

您的绘图函数适用于“线条”，而不是“正方形”的正方形。

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

如果我们只画出三条线，这样的：

enter image description here

有没有“面子”，以填补那里，你需要重新组织代码，直到你绘制的差异平方的面一下子，让你有什么实际填写。

填充伪3D画布形状

相关推荐