在绘制<canvas>圆圈时切换颜色(上下文.fillStyle)

Question

我在codepen上找到了代码，并修改为以下内容：

<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个cirlces。我喜欢将最后5个圆圈作为红色。（25个蓝色，5个红色）

context.fillstyle =" rgba（190、60、80，" this.opacity "）";

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

Answer 1

从来没有做任何事情的最佳方法。当您推动圆圈时，您只需在此处发送样式而不是不透明度。

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>

Answer 2

首先修改Circle方法，以便接受颜色。

然后在draw函数中使用该颜色（如果设置）。

现在您可以执行new Circle(x, y, opacity, color);，其中最后一个参数是可选的颜色

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 color = i > 24 ? '255,0,0' : null; // CHANGE COLOR AFTER 24 (RGB for red)
    var circle = new Circle(x, y, opacity, color);
    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, color) { // add color argument
  this.x = parseInt(x);
  this.y = parseInt(y);
  this.opacity = opacity;
  this.color = color; // set color
}
Circle.prototype.draw = function(color) {
  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();
  /* use color, if set*/
  context.fillStyle = 'rgba(' + (this.color || '25, 35, 50') + ", " + this.opacity + ")";
  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="600" height="400"></canvas>