Question

我正在尝试在HTML5画布动画中为数组添加多种颜色。我使用if语句根据数组索引添加3种不同的颜色，但显示的唯一颜色是＆＃34; else＆＃34;颜色为橙色）。以下是代码。

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

}

Answer 1

你需要为每个口香糖而不是一个.fill做.fill：

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

Answer 2

看起来gumballs [i]将永远是一个对象 - {x，y，r，d} - 所以s％3和s％4将是NaN，导致代码落入else子句。< / p>

Answer 3

你声明你想根据数组索引设置颜色，这样你的if应该检查索引，而不是那个索引的数组元素

尝试更改：

if(s % 3 === 0){

要：

if(i % 3 === 0){

其他if

相同

如何向数组添加多种颜色

3 个答案: