web-dev-qa-db-fra.com

Utiliser par programme les valeurs RGBa dans fillStyle dans <canvas>?

En utilisant <canvas>, Je veux définir la valeur RGBa du rectangle à l'aide d'une variable.

par exemple:

ctx.fillStyle = "rgba(32, 45, 21, 0.3)";

fonctionne bien, mais en l'utilisant avec une variable:

var r_a =  0.3;
ctx.fillStyle = "rgba(32, 45, 21, r_a)";

ne fonctionne pas.

Apparemment, fillStyle n'accepte qu'une chaîne. Alors, comment puis-je définir une valeur de la valeur rgba en utilisant une variable au lieu de définir explicitement les valeurs?

javascripthtml5canvas
42
John

Il vous suffit de concaténer le r_a variable pour construire la chaîne correctement:

var r_a = 0.3; 
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")";
92
CMS
ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")";

Il s'agit d'une concaténation de chaînes.

19
Fabien Ménager

Je suis très en retard à la fête mais j'ai eu un problème similaire et je l'ai résolu d'une manière légèrement différente qui peut être utile.

Comme j'avais besoin de réutiliser les couleurs de remplissage à différents niveaux alpha, j'ai utilisé la méthode de remplacement JavaScript:

colurfill = "rgba(255, 255, 0, [[opacity]])";
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5");
:
:
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75");

Évidemment, ce n'est pas nécessairement le niveau alpha qui varie, il peut s'agir de l'un des autres canaux.

8
Simon Tewsi

Je cherchais quelque chose de similaire et suis tombé sur votre message, après l'avoir lu, j'ai trouvé une solution pour moi, je travaille avec l'API audio et je voulais une couleur dynamique basée sur une variable provenant de la fréquence dans le fichier son . Voici ce que j'ai trouvé et ça marche pour l'instant, pensais que je le posterais au cas où cela aiderait depuis que je me suis inspiré de votre question:

function frameLooper(){ 
    window.requestAnimationFrame(frameLooper); 
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array); 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
// Clear the canvas 

    bars = 100; 
        for (var i = 0; i < bars; i++) { 
            bar_x = i * 3; 
            bar_width = 2; 
            bar_height = -(fbc_array[i] / 2); 
            bar_color = i * 3;

    //fillRect( x, y, width, height ) 
    // Explanation of the parameters below 
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height); 
            ctx.fillStyle = "rgb(100," + bar_color + "," + bar_color + ")" ; 
// Color of the bars
0
Huc