使用<canvas>

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

首先修改Circle方法，使其接受颜色。

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

从来没有最好的办法做任何事情。当你推动圆圈时，你可以在那里发送风格，而不仅仅是不透明度。

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;