0

キャンバスで複数の描画を実行しようとすると、間違ったタイミングで物事が台無しになる可能性があることに気付きました。

つまり、キャンバスに間隔を介して線を引きます。次に、その（線の描画）を複数回複製し、それぞれのストロークの色を異なるように設定します...最終的に、ストロークの色を他の線などに移動させます...

他に干渉できない複数の描画インスタンス (context.ctx) を持つ方法はありますか?

以下の間隔コードの例:

    it.ctx.strokeStyle = "rgba(200,200,0,.1)"
    it.ctx.fillStyle = "rgba(255,255,22,.01)";
    var p = i.p.split(",");

    var rp = setInterval(function(){
        if(cc>=20){
            clearInterval(rp);
            it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
            return;
        }
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    },30);
4

1 に答える 1

2

strokeStyleとを変更するこの間隔関数の呼び出しの間に他のコードを実行している場合はfillStyle、キャンバスに描画するたびにこれらの値を明示的に設定する必要があります。

var p = i.p.split(",");
var rp = setInterval(function(){
    it.ctx.save(); // Save the current canvas styles.

    it.ctx.strokeStyle = "rgba(200,200,0,.1)";
    it.ctx.fillStyle = "rgba(255,255,22,.01)";

    if(cc>=20){
        clearInterval(rp);
        it.ctx.strokeRect( p[0],p[1],p[2],p[3] );
    }
    else {
        it.ctx.fillRect( p[0],p[1],p[2],p[3] );
        cc++;
    }

    it.ctx.restore(); // Restore the original canvas styles.
},30);

strokeStyle間隔関数でandを設定しない場合fillStyle、キャンバスは外部の「バックグラウンド」コードが確立したものを使用します。

于 2012-04-23T22:18:54.873 に答える