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，畫布會使用任何外部的「背景」代碼已經建立。