javascript - strokestyle - fillstyle image

¿Utiliza programáticamente valores RGBa en fillStyle en<canvas>?

Question

Usando <canvas> , quiero establecer el valor RGBa del rectángulo usando una variable.

por ejemplo:

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

funciona bien, pero usándolo con una variable:

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

no funciona

Aparentemente fillStyle solo acepta una cadena. Entonces, ¿cómo puedo establecer un valor del valor rgba usando alguna variable en lugar de definir explícitamente los valores?

Answer 1

Estaba buscando algo similar y me encontré con su publicación, después de leerla, se me ocurrió una solución, estoy trabajando con la API de audio y quería un color dinámico basado en una variable proveniente de la frecuencia en el archivo de sonido . Esto es lo que se me ocurrió y funciona por ahora, pensé en publicarlo en caso de que me sirviera, ya que obtuve la inspiración de su pregunta:

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

Answer 2

Llegué muy tarde a la fiesta pero tuve un problema similar y lo resolví de una manera ligeramente diferente que puede ser útil.

Como necesitaba reutilizar los colores de relleno en diferentes niveles alfa, utilicé el método de reemplazo de JavaScript:

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

Obviamente no tiene que ser el nivel alfa que varía, podría ser uno de los otros canales.

Answer 3

Solo necesita concatenar la variable r_a para construir la cadena correctamente:

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

Answer 4

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

Es concatenación de cadenas.