RGBA色の不透明度のアニメーション表現

Question

私は引き分け矩形に色を追加しようとしたときについてです質問があります：

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

私のドローRECTにおける色は青色光であるが、私はいくつかを作るしようとしているときその半減transperrantを作るために私の不透明度値の修正：

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

を：

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

これは私がしようとしてそれまでは全く機能していません3210

これはちょうどうまく動作します、私の質問はなぜopacityVar/2変数の間にダブル"のマークと+を追加する必要がありますか？

私はこれを検索しようとしていますが、rgba()引数の詳細についての情報はありません。誰でもこの手伝いをしてください。

Answer 1

ctx.fillStyleは文字列です。あなたはあなたの文字列の一部としてjavascriptを実行しようとしています。そうするためには、文字列の外でそのJavaScriptを実行し、それをあなたの文字列に連結しなければなりません。

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

+はあなたの文字列とあなたのjavascriptのは1つの文字列になり連結します。 "は、文字列の開始位置と終了位置をエンジンに通知します。

また、template literalsをjavascriptに使用することもできます。

Answer 2

"opacityVar/2" 

は、rgbaカラーに対して有効な値ではありません。あなたは浮動小数点に変換することができるStringを必要とします。ですから、このようなことをテストすることができます。それは有効な数値に評価されているので

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

：

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

あなたの第二のコードでは、作業を行います。