rgba expression d'animation d'opacité des couleurs

Question

J'ai une question qui est quand j'essaie d'ajouter de la couleur à mon rectangle de tirage:

ctx.fillStyle = "rgba(0,102,153,1)"; 
    ctx.fillRect(100,100,100,100); 

la couleur de mon tirage rect est bleu clair, mais quand je suis en train de faire quelques modification sur ma valeur d'opacité pour rendre sa demi-transperrant:

var opacityVar = 1; 
    ctx.fillStyle = "rgba(0,102,153,opacityVar/2)"; 
    ctx.fillRect(100,100,100,100); 

cela ne fonctionne pas du tout jusqu'à ce que j'essayer:

var opacityVar = 1; 
    ctx.fillStyle = "rgba(0,102,153,"+opacityVar/2+")"; 
    ctx.fillRect(100,100,100,100); 

cela fonctionne très bien, ma question est pourquoi devrais-je ajouter double " marques et + entre ma variable opacityVar/2?

J'essaye de rechercher ceci autour mais semble ne pas avoir une information détaillée au sujet de l'expression rgba() arguments. Quelqu'un pourrait m'aider s'il vous plaît avec ceci?

Answer 1

ctx.fillStyle est une chaîne. Vous essayez d'exécuter javascript dans le cadre de votre chaîne. Pour ce faire, vous devez exécuter ce javascript en dehors de la chaîne, puis le concaténer dans votre chaîne.

this is a string -> "rgba(0,102,153," 
this is javascript -> opacityVar/2 
this is a string -> ")" 

la + concatène vos cordes et votre javascript résultat dans une chaîne. Le " indique au moteur où votre chaîne commence et où elle se termine. Vous pouvez également utiliser template literals en javascript maintenant.

Answer 2

"opacityVar/2" 

La valeur de la couleur rgba n'est pas valide. Vous voulez un String, qui peut être converti en un float. Ainsi, vous pouvez vérifier que comme ceci:

parseFloat("opacityVar/2") // NaN => not a number 

Votre second code fonctionne:

parseFloat(""+(opacityVar/2));// 0.5 => a valid number 

Parce qu'il évalue à un numéro valide.