html5キャンバス - 複数の描画インスタンス

Question

キャンバスで複数の図面を実行しようとすると、タイミングが間違っていると気になることがありました。

I.e.キャンバスに間隔を置いてラインを描画させます。その線画を複数回複製して、それぞれのストロークカラーを異なるように設定します...最後に、ストロークカラーを他のラインなどに送ります。

複数の描画を行う方法はありますか他の人に干渉しないインスタンス（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); 

Answer 1

あなたは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とインターバル機能でfillStyle、キャンバス外「背景」のコードが設立したものを使用します。