html5 canvas - несколько экземпляров чертежа

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 в функции интервала, холст будет использовать любой внешний «фон» код установлен.