以编程方式在<canvas>的fillStyle中使用RGBa值？

我正在用<canvas>学习编程。 我想使用一个variables来设置矩形的RGBa值。

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

这不起作用。 但是ctx.fillStyle = "rgba(32, 45, 21, 0.3)"; 确实有效

显然fillStyle只接受一个string。 那么如何使用某个variables来设置rgba值的值，而不是显式地定义值呢？

Answer 1

你只需要连接r_avariables来正确地build立string：

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

Answer 2

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

它是string连接。

Answer 3

我很晚参加派对，但是我遇到了类似的问题，并以稍微不同的方式解决了这个问题。

由于我需要在不同的alpha级别重复使用填充颜色，因此我使用了JavaScriptreplace方法：

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

显然，它不一定是变化的阿尔法水平，它可能是其他渠道之一。

Answer 4

我正在寻找类似的东西，并在阅读后碰到你的文章，我为自己想出了一个解决scheme，我正在使用audioAPI，并希望基于来自声音文件中频率的variables的dynamic颜色。 这是我想出来的，现在是炒作了，以为我会张贴它的情况下，因为我从你的问题得到灵感，

 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