Question

我正在寻找一种方法来填充4种颜色的所有圆圈的样式：#00ce66，#e3bf37，#cc5543，#a1b7c2。我希望圈子显示方式：在页面加载时，25％的圆圈为红色，25％的圆圈为黄色...等等。

当我添加Math.random()并放入颜色时，圆圈为黑色。请帮忙:-)

(function() {
    var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

    // Main
    initHeader();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {x: 0, y: height};

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';

        canvas = document.getElementById('canvas');
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext('2d');

        // create particles
        circles = [];
        for(var x = 0; x < width*0.2; x++) {
            var c = new Circle();
            circles.push(c);
        }
        animate();
    }

    // Event handling
    function addListeners() {
        window.addEventListener('scroll', scrollCheck);
        window.addEventListener('resize', resize);
    }

    function scrollCheck() {
        if(document.body.scrollTop > height) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        largeHeader.style.height = height+'px';
        canvas.width = width;
        canvas.height = height;
    }

    function animate() {
        if(animateHeader) {
            ctx.clearRect(0,0,width,height);
            for(var i in circles) {
                circles[i].draw();
            }
        }
        requestAnimationFrame(animate);
    }

    // Canvas manipulation
    function Circle() {
        var _this = this;

        // constructor
        (function() {
            _this.pos = {};
            init();
            console.log(_this);
        })();

        function init() {
            _this.pos.x = Math.random()*width;
            _this.pos.y =-50;
            _this.alpha = 0.1+Math.random()*0.9;
            _this.scale = 0.1+Math.random()*1;
            _this.velocity = Math.random();
        }

        this.draw = function() {
            if(_this.alpha <= 0) {
                init();
            }
            _this.pos.y -= -_this.velocity;
            _this.alpha -= 0.0005;
            ctx.beginPath();
            ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
            ctx.fillStyle = 'rgba(16,239,173,'+ _this.alpha+')';
            ctx.fill();
        };
    }
})();

Answer 1

您可以创建一个包含4种颜色的数组，并在创建每个圆时选择一个随机颜色。

以下是Circle功能的代码：

function Circle() {
  var _this = this;

  // constructor
  (function() {
    _this.pos = {};
    init();
    console.log(_this);
  })();

  function init() {
    _this.pos.x = Math.random()*width;
    _this.pos.y =-50;
    _this.alpha = 0.1+Math.random()*0.9;
    _this.scale = 0.1+Math.random()*1;
    _this.velocity = Math.random();

    var colors = [[0,206,102], [227, 191, 55], [204,85,67], [161,183, 194]];
    var random_index = Math.floor(0 + (Math.random() * ((3 + 1) - 0)));
    _this.color = colors[random_index];
  }

  this.draw = function() {
    if(_this.alpha <= 0) {
      init();
    }
    _this.pos.y -= -_this.velocity;
    _this.alpha -= 0.0005;
    ctx.beginPath();
    ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);

    var c = _this.color;
    ctx.fillStyle = 'rgba('+c[0]+','+c[1]+','+c[2]+','+ _this.alpha+')';
    ctx.fill();
  };
}

如何在画布中填充不同颜色的所有圆圈：红色，黄色，蓝色和绿色？

1 个答案: