html5 캔버스 - 여러 드로잉 인스턴스

Question

캔버스에서 여러 드로잉을 실행하려고하면 잘못된 타이밍으로 인해 엉망이 될 수 있습니다.

e.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, 캔버스 외부 "배경"코드가 설립했다대로 사용합니다.