couleur de commutation (context.fillStyle) lors de l'élaboration des cercles avec <canvas>

Question

J'ai trouvé les codes sur codepen et modifié comme suit:

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

J'ai 30 maintenant cirlces. Je voudrais avoir 5 derniers cercles de couleur rouge (25 en bleu, rouge 5)

context.fillStyle = "rgba (190, 60, 80," + this.opacity + ").";

Quelle est la meilleure pratique pour atteindre cet objectif?

Answer 1

Il n'y a jamais une meilleure façon de faire quoi que ce soit. Quand vous poussez les cercles, vous pouvez simplement envoyer le style à la place, juste l'opacité.

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

Commencez par modifier la méthode Circle afin qu'elle accepte une couleur.

Utilisez ensuite cette couleur, si elle est définie, dans la fonction draw.

Maintenant, vous pouvez faire new Circle(x, y, opacity, color); où le dernier argument est une option couleur

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>