1

現在、キャンバスの 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/

私が間違っていることは何ですか？

4

1 に答える 1

0

描画機能は、正方形の「面」ではなく「線」で機能します。

行を埋めることはできません。塗りつぶし可能な領域を作成するには、同じパスに少なくとも 2 つの行が必要です。( を呼び出すたびにbeginPath、新しいパスを作成していることに注意してください。最長のパスは 1 つの線分だけです)

持っている線のうち 3 本だけを描画すると、次のようになります。

ここに画像の説明を入力

そこには塗りつぶす「面」はありません。実際に塗りつぶすものがあるように、正方形の異なる面を一度にすべて描画するまで、コードを再編成する必要があります。

于 2013-05-03T15:46:27.713 に答える