Utilizzare a livello di codice i valori RGBa in fillStyle in <canvas>?

Utilizzando <canvas>, voglio impostare il valore RGBa del rettangolo utilizzando una variabile.Utilizzare a livello di codice i valori RGBa in fillStyle in <canvas>?

ad esempio:

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

funziona bene, ma il suo utilizzo con una variabile:

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

non funziona.

Apparentemente fillStyle accetta solo una stringa. Quindi, come faccio a impostare un valore del valore rgba usando alcune variabili invece di definire esplicitamente i valori?

fonte

2009-12-24 John

"Sto rompendo tutte le regole o guidlines qui quindi si prega di lasciare lo so dolcemente e lo terrò a mente per la prossima volta ... "L'unica cosa da imparare è che è educato accettare una risposta se qualcuno ha fornito la risposta di cui hai bisogno. A sinistra di ogni risposta, sotto il punteggio, dovresti vedere un grande punto interrogativo. Cliccando su questo, la risposta sarà accettata, il che darà a te e alla persona che risponde alla domanda un po 'di bonus di reputazione. –

Natale vigilia 2009. Hai avuto risposta alla tua domanda entro un'ora. Nel 2016 non hai ancora accettato. Dev'essere stata una grande festa di Natale! – Stewart

Hai solo bisogno di concatenare la variabile r_a per costruire correttamente la stringa:

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

fonte

2009-12-24 08:22:56 CMS

Si potrebbero anche usare nuove stringhe di template HTML: 'cts.fillStyle = \' rgba (32, 45, 21, $ {r_a}) \ ';'. Ciò consente l'interpolazione, che è ciò che sembra che stavi cercando di fare. – trysis

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

È concatenazione di stringhe.

fonte

2009-12-24 08:23:27

Sono molto in ritardo per la festa ma ho avuto un problema simile e l'ho risolto in un modo leggermente diverso che potrebbe essere utile.

Poiché avevo bisogno di riutilizzare i colori di riempimento a diversi livelli alfa, ho usato il JavaScript sostituire metodo:

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

Ovviamente non deve essere il livello alfa che varia, potrebbe essere uno di gli altri canali.

fonte

2012-03-28 20:37:24

come una leggera modifica a questo, (con set di caratteri = UTF-8), color = "rgba (255, 255, 0, α)"; colorour.replace ("α", 0.5); // può usare un numero qui – QuentinUK

ero alla ricerca di qualcosa di simile e sono imbattuto in tuo post, dopo averlo letto, mi si avvicinò con una soluzione per me, sto lavorando con l'API audio e volevo un colore dinamico basato su una variabile proveniente dalla frequenza nel file audio. Ecco quello che mi è venuta e wok per il momento, ho pensato di postare in caso aiuta da quando ho preso l'ispirazione dalla tua domanda:

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

fonte

2014-12-19 05:26:43 Huc

Utilizzare a livello di codice i valori RGBa in fillStyle in <canvas>?

risposta

Problemi correlati