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，画布会使用任何外部的“背景”代码已经建立。