Javascript 以编程方式在 <canvas> 的 fillStyle 中使用 RGBa 值？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1957346/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Programmatically use RGBa values in fillStyle in <canvas>?
提问by John
Using <canvas>, I want to set the RGBa value of the rectangle using a variable.
使用<canvas>，我想使用变量设置矩形的 RGBa 值。
for example:
例如：
ctx.fillStyle = "rgba(32, 45, 21, 0.3)";
works fine, but using it with a variable:
工作正常，但将其与变量一起使用：
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, r_a)";
doesn't work.
不起作用。
Apparently fillStyleonly accepts a string. So how do I set a value of the rgba value using some variable instead of explicitly defining the values?
显然fillStyle只接受一个字符串。那么如何使用某个变量而不是显式定义值来设置 rgba 值的值呢？
回答by CMS
You just need to concatenate the r_avariable to build the string correctly:
您只需要连接r_a变量即可正确构建字符串：
var r_a = 0.3;
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")";
回答by Fabien Ménager
ctx.fillStyle = "rgba(32, 45, 21, "+r_a+")";
It is string concatenation.
它是字符串连接。
回答by Simon Tewsi
I'm very late to the party but I had a similar problem and solved it in a slightly different way that may be useful.
我参加聚会很晚，但我遇到了类似的问题，并以可能有用的略有不同的方式解决了它。
Since I needed to reuse the fill colours at different alpha levels, I used the JavaScript replace method:
由于我需要在不同的 alpha 级别重用填充颜色，因此我使用了 JavaScript 替换方法：
colurfill = "rgba(255, 255, 0, [[opacity]])";
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.5");
:
:
ctx.fillStyle = colurfill.replace("[[opacity]]", "0.75");
Obviously it doesn't have to be the alpha level that varies, it could be one of the other channels.
显然，它不必是变化的 alpha 级别，它可以是其他通道之一。
回答by NicoWheat
var r_a = 0.3
ctx.fillStyle = `rgba(32, 45, 21, ${r_a})`;
These are called template literals https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
这些被称为模板文字 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
The back-ticks `` are often found left of the number 1 on the keyboard on US keyboards.
在美国键盘上，反引号 `` 通常位于键盘数字 1 的左侧。
回答by Huc
I was looking for something similar and ran into your post, after reading it, I came up with a solution for myself, I'm working with the audio API and wanted a dynamic color based on a variable coming from the frequency in the sound file. Here's what I came up with and it woks for now, thought I'd post it in case it helps since I got the inspiration from your question:
我正在寻找类似的东西并遇到了你的帖子，在阅读之后，我为自己想出了一个解决方案，我正在使用音频 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
