多くのキャンバスがrgbaを変更するためのsetInterval

Question

私はキャンバスが1つあり、その中にただ円があり、異なる色で塗りつぶされていて、特定の時間内にrgbaを変更します。

only one canvas < - それは

two canvas <に動作します - それは動作しますが、重複したコード今

で、私は64枚のキャンバスを持っている...

私は、同じスクリプトを一度書いてみるが、 ...

4〜5秒後に狂ってしまい、私も狂ってしまいます。スクリプトを書き換える方法

$(function(){ 
 
    var c, ctx; 
 
    var cs = $('.demo'); 
 
    var t = 1; 
 
    var colors = [ 
 
      "rgba(255,0,0,[[opacity]])", 
 
      "rgba(255,255,0,[[opacity]])", 
 
      "rgba(0,255,0,[[opacity]])", 
 
     ]; 
 
     
 
    for (var i=0; i < cs.length; i++) { 
 
     c = cs[i]; 
 
     ctx = c.getContext('2d'); 
 
     ctx.arc(100, 100, 100, 0, 2 * Math.PI); 
 
     setTimeout(changeRGBA, 0, colors, c, ctx, t, i); 
 
    } 
 

 
    function changeRGBA(colors, c, ctx, t, i) { 
 
     ctx.clearRect(0, 0, c.width, c.height); 
 
     t = (t == 1) ? 0.1 : 1; 
 
     ctx.fillStyle = colors[i].replace("[[opacity]]", t); 
 
     ctx.fill(); 
 
     setInterval(changeRGBA, 500, colors, c, ctx, t, i); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery.js"></script> 
 
<canvas id="demo1" class="demo" width="200" height="200"></canvas> 
 
<canvas id="demo2" class="demo" width="200" height="200"></canvas> 
 
<canvas id="demo3" class="demo" width="200" height="200"></canvas>

？

Answer 1

だけのsetIntervalのためのsetTimeoutを置き換え、それは私の質問に適しています、私の質問

を指摘するコメント残す@epascarelloに感謝します。

しかし、私は

$(function(){ 
 
    var c, ctx; 
 
    var cs = $('.demo'); 
 
    var t = 1; 
 
    var colors = [ 
 
      "rgba(255,0,0,[[opacity]])", 
 
      "rgba(255,255,0,[[opacity]])", 
 
      "rgba(0,255,0,[[opacity]])", 
 
     ]; 
 
     
 
    for (var i=0; i < cs.length; i++) { 
 
     c = cs[i]; 
 
     ctx = c.getContext('2d'); 
 
     ctx.arc(100, 100, 100, 0, 2 * Math.PI); 
 
     changeRGBA(colors, c, ctx, t, i); 
 
    } 
 

 
    function changeRGBA(colors, c, ctx, t, i) { 
 
     ctx.clearRect(0, 0, c.width, c.height); 
 
     t = (t == 1) ? 0.1 : 1; 
 
     ctx.fillStyle = colors[i].replace("[[opacity]]", t); 
 
     ctx.fill(); 
 
     setTimeout(changeRGBA, 500, colors, c, ctx, t, i); 
 
    } 
 
});

<script src="https://code.jquery.com/jquery.js"></script> 
 
<canvas id="demo1" class="demo" width="200" height="200"></canvas> 
 
<canvas id="demo2" class="demo" width="200" height="200"></canvas> 
 
<canvas id="demo3" class="demo" width="200" height="200"></canvas>