Javascript 如何向阵列添加多种颜色

我试图在HTML5画布动画中向数组添加多种颜色。我使用if语句根据数组索引添加3种不同的颜色，但显示的唯一颜色是“else”颜色（橙色）。下面是代码

window.onload = function() {
    var canvas        = document.getElementById('myCanvas'),
    context       = canvas.getContext('2d'),
    w             = window.innerWidth,
    h             = window.innerHeight,
    total         = 100,
    gumballs      = [];
    canvas.width  = w;
    canvas.height = h;

    for(var i = 0; i < total; i++) {
        gumballs.push({
            x: Math.random()* w,
            y: Math.random()* h,
            r: Math.random()* 4+3,
            d: Math.random()*total
        })
    }   

    function draw() {
        context.clearRect(0,0,w,h);
        context.beginPath();
        for(var i = 0; i < total; i++) {
            var s = gumballs[i];
            if(s % 3 === 0){
                context.fillStyle = 'blue';
            } else if (s % 4 === 0) {
                context.fillStyle = 'red';
            } else {
                context.fillStyle = "orange";
            }
            context.moveTo(s.x, s.y);
            context.arc(s.x, s.y, s.r, 0, Math.PI*2, true);
        } 
        context.fill();
        update();
    }

    function update() {
        for(var i = 0;  i < total; i++) {
            var s = gumballs[i];
            s.y +=  8;
            if(s.x > w + 10 || s.x < - 10 || s.y > h) {
                gumballs[i] = {x: Math.random()*w, y: 0, r: s.r, d: s.d};                   
            }
        }
    }
    setInterval(draw, 30);

window.onload=function（）{
var canvas=document.getElementById（'myCanvas'），
context=canvas.getContext（'2d'），
w=窗宽，
h=窗内高度，
总数=100，
口香糖=[]；
画布宽度=w；
canvas.height=h；
对于（变量i=0；iw+10 | | s.x<-10 | | s.y>h）{
口香糖[i]={x:Math.random（）*w，y:0，r:s.r，d:s.d}；
}
}
}
设定间隔（抽签，30）；

---

}

看起来像是口香糖[i]将始终是一个对象-{x，y，r，d}，因此s%3和s%4将是NaN，导致代码落入else子句。

您声明要根据数组索引设置颜色，因此您的

if

应该检查索引，而不是该索引处的数组元素

尝试更改：

if(s % 3 === 0){

致：

---

其他

也一样，如果你需要这样做。为每个口香糖球填充，而不是一个。最后填充：

function draw() {
    context.clearRect(0,0,w,h);
    for(var i = 0; i < total; i++) {
        var s = gumballs[i];
        if((i%3) == 0){
            context.fillStyle = 'blue';
        } else if ((i%4) == 0) {
            context.fillStyle = 'red';
        } else {
            context.fillStyle = "orange";
        }
        context.beginPath();
        context.moveTo(s.x, s.y);
        context.arc(s.x, s.y, s.r, 0, Math.PI*2, true);
        context.fill();
    } 
    update();
}

函数绘图（）{
clearRect（0,0，w，h）；
对于（变量i=0；i
谢谢。有没有其他方法可以向数组中添加多种颜色？我刚刚尝试过，它们都变成了蓝色，这是第一个if语句。但它仍然没有添加多种颜色。完美，修复了它！非常感谢。
function draw() {
    context.clearRect(0,0,w,h);
    for(var i = 0; i < total; i++) {
        var s = gumballs[i];
        if((i%3) == 0){
            context.fillStyle = 'blue';
        } else if ((i%4) == 0) {
            context.fillStyle = 'red';
        } else {
            context.fillStyle = "orange";
        }
        context.beginPath();
        context.moveTo(s.x, s.y);
        context.arc(s.x, s.y, s.r, 0, Math.PI*2, true);
        context.fill();
    } 
    update();
}