javascript - 使用<canvas>绘制圆时切换颜色(context.fillStyle)

我在代码笔上找到了代码，并进行了如下修改：

<canvas id="heatmap" width=300 height=150></canvas>

var canvas;
var context;
var screenH;
var screenW;
var circles = [];
var numcircles = 30;


$('document').ready(function() {
    canvas = $('#heatmap');
    screenH = canvas.height();
    screenW = canvas.width();
    canvas.attr('height', screenH);
    canvas.attr('width', screenW);
    context = canvas[0].getContext('2d');

    for(var i = 0; i < numcircles; i++) {
        var x = Math.round( Math.random() * screenW);
        var y = Math.round( Math.random() * screenH);
        var opacity = Math.random();
        var circle = new Circle(x, y, opacity);
    circles.push(circle);
    }
  drawCircles();
});

function drawCircles() {
    var i = 0, me = this;
    if (!circles.length) return;
    (function loop() {
      var circle = circles[i++];
      circle.draw(context);
      if (i < circles.length)
        setTimeout(loop, 16);
    })();
}

function Circle(x, y, opacity) {
    this.x = parseInt(x);
    this.y = parseInt(y);
    this.opacity = opacity;
}


Circle.prototype.draw = function(){
    context.save();
    context.translate(this.x, this.y);
    context.beginPath()
  context.arc(0,0,Math.floor(Math.random() * (40 - 10) / 10) * 10 + 10,0,2*Math.PI);
    context.closePath();
    context.fillStyle = "rgba(25, 35, 50, " + this.opacity + ")";
    context.shadowBlur = 5;
    context.shadowColor = '#ffffff';
    context.fill();
    context.restore();
}

所以我现在有30个。我希望最后5个圆圈为红色（蓝色为25，红色为5）


  context.fillStyle =“ rgba（190，60，80，” + this.opacity +“）”;


实现目标的最佳实践是什么？

最佳答案

从来没有最好的方法可以做任何事情。当您推动圈子时，您可以仅在其中发送样式，而不只是不透明度。

var circle = new Circle(x, y, i + 6 > numcircles ? "rgba(190, 60, 80, " + opacity + ")" : "rgba(25, 35, 50, " + opacity + ")");

var canvas;
var context;
var screenH;
var screenW;
var circles = [];
var numcircles = 30;


$('document').ready(function() {
  canvas = $('#heatmap');
  screenH = canvas.height();
  screenW = canvas.width();
  canvas.attr('height', screenH);
  canvas.attr('width', screenW);
  context = canvas[0].getContext('2d');

  for (var i = 0; i < numcircles; i++) {
    var x = Math.round(Math.random() * screenW);
    var y = Math.round(Math.random() * screenH);
    var opacity = Math.random();
    var circle = new Circle(x, y, i + 6 > numcircles ? "rgba(190, 60, 80, " + opacity + ")" : "rgba(25, 35, 50, " + opacity + ")");
    circles.push(circle);
  }
  drawCircles();
});

function drawCircles() {
  var i = 0,
    me = this;
  if (!circles.length) return;
  (function loop() {
    var circle = circles[i++];
    circle.draw(context);
    if (i < circles.length)
      setTimeout(loop, 16);
  })();
}

function Circle(x, y, style) {
  this.x = parseInt(x);
  this.y = parseInt(y);
  this.style = style;
}


Circle.prototype.draw = function() {
  context.save();
  context.translate(this.x, this.y);
  context.beginPath()
  context.arc(0, 0, Math.floor(Math.random() * (40 - 10) / 10) * 10 + 10, 0, 2 * Math.PI);
  context.closePath();
  context.fillStyle = this.style;
  context.shadowBlur = 5;
  context.shadowColor = '#ffffff';
  context.fill();
  context.restore();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id=heatmap width=300 height=150></canvas>