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

Utilizando <canvas>, quiero establecer el valor RGBa del rectángulo usando una variable.¿Utiliza programáticamente valores RGBa en fillStyle en <canvas>?

por ejemplo:

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

funciona bien, pero usarlo con una variable:

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

no funciona.

Al parecer 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?

Fuente

2009-12-24 John

"Me estoy rompiendo las reglas o las actuales directivas aquí, por favor deje lo sé con cuidado y lo tendré en cuenta para la próxima vez ... "Lo único que debe aprender es que es educado aceptar una respuesta si alguien le ha brindado la respuesta que necesita. A la izquierda de cada respuesta, debajo del puntaje, deberías ver un gran signo de interrogación. Al hacer clic en eso, se marcará esa respuesta como aceptada, lo que le da a usted y a la persona que responde la pregunta un poco de bonificación de reputación. –

Xmas eve 2009. Tu respuesta fue respondida dentro de una hora. En 2016 todavía no aceptaste. Debe haber sido una gran fiesta de Navidad! – Stewart

sólo tiene que concatenar la variable r_a para crear la cadena correctamente:

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

Fuente

2009-12-24 08:22:56 CMS

También podría usar nuevas cadenas de plantillas HTML: 'cts.fillStyle = \' rgba (32, 45, 21, $ {r_a}) \ ';'. Esto permite la interpolación, que es lo que parece que intentabas hacer. – trysis

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

Es la concatenación de cadenas.

Fuente

2009-12-24 08:23:27

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

Ya que necesitaba volver a utilizar los colores de relleno en diferentes niveles alfa, he utilizado el método de JavaScript reemplazar:

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

Fuente

2012-03-28 20:37:24

como un ligero cambio a esto, (con charset = UTF-8), color = "rgba (255, 255, 0, α)"; colour.replace ("α", 0.5); // puede usar un número aquí – QuentinUK

Estaba buscando algo similar y encontré 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 ocurrió con woks y por ahora, pensé que había puesto en caso de que ayuda ya que me dio 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

Fuente

2014-12-19 05:26:43 Huc

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

Respuesta

Cuestiones relacionadas