web-dev-qa-db-ja.com

<canvas>のfillStyleでプログラム的にRGBa値を使用しますか？

<canvas>を使用して、変数を使用して四角形のRGBa値を設定します。

例えば：

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

正常に動作しますが、変数とともに使用します：

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

動作しません。

明らかにfillStyleは文字列のみを受け入れます。では、値を明示的に定義する代わりに、何らかの変数を使用してrgba値の値を設定するにはどうすればよいですか？

javascripthtml5canvas
42
John

文字列を正しく構築するには、r_a変数を連結するだけです。

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

文字列の連結です。

19
Fabien Ménager

私はパーティーに非常に遅れていますが、私は同様の問題を抱えており、わずかに異なる方法でそれを解決しました。

さまざまなアルファレベルで塗りつぶしの色を再利用する必要があるため、JavaScriptのreplaceメソッドを使用しました。

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

明らかに、変化するのはアルファレベルである必要はなく、他のチャネルの1つである可能性があります。

8
Simon Tewsi

私は似たようなものを探していて、あなたの投稿に出会いました。それを読んだ後、私は自分自身の解決策を思いつきました、私はオーディオAPIで作業していて、サウンドファイルの周波数から来る変数に基づいた動的な色を望んでいました。ここに私が思いついたものがあります、それは今のところ中途半端です、あなたの質問からインスピレーションを得たのでそれが助けになるならそれを投稿すると思いました：

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
0
Huc