Question

我有很多画布，每个画布，它只是一个圆圈，并填充不同的颜色，它将在特定时间内更改其rgba。

two canvas＆lt; - 它有效，包含重复的代码

现在，我有64个画布......

我尝试一次编写相同的脚本，但是......

它在4~5秒后发疯，让我发疯。

＆＃13;

<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>

＆＃13;

{{1}}

＆＃13;

如何重写脚本？

Answer 1

感谢@epascarello发表评论指出我的问题

它适用于我的问题，只需将setTimeout替换为setInterval。

但我觉得它不够好，因为我重复输入

setTimeout(changeRGBA, 0, colors, c, ctx, t, i);

＆＃13;

$(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);
    }
});

＆＃13;

<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>

＆＃13;

setInterval为许多canvas更改其rgba

1 个答案: