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

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种颜色创建一个数组，并在创建每个圆时选择一个随机的数组。

这里是圆的功能代码：

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