您只需要连接r_a变量就可以正确构建字符串：

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

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

它是字符串连接。

我已经很晚了，但我有一个类似的问题，并解决了它在一个稍微不同的方式，可能是有用的。
由于我需要在不同的alpha级别重用填充颜色，所以我使用了JavaScript replace方法：

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

显然，变化的不一定是alpha电平，也可以是其他通道之一。

var r_a = 0.3
ctx.fillStyle = `rgba(32, 45, 21, ${r_a})`;

这些称为模板文字https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
在美式键盘上，反勾号通常出现在数字1的左边。

我正在寻找一些类似的东西，并运行到您的职位，阅读后，我想出了自己的解决方案，我正在与音频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

//Example code 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//This function changes a number to it's HEX equivelent (for n<=255)
function hex(n){
    let letters = ["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F"];

    if(n>255){ n = 255;}  // Bounding parameters 0 <= n <= 255
    if(n < 0){ n = 0; }

    let a = n;    
    let b = n%16;
    a = Math.floor(a/16);
    b = Math.floor(b/16);
    a = letters[a];
    b = letters[b];
    return a+b;
}

//This function concatenates three hex values into one string preceeded by #
function hexColor(r,g,b){
    let red = hex(r);
    let blue = hex(b);
    let green = hex(g);
    return "#"+red+green+blue;
}

//This function simplifies the fillStyle/fill functions for canvas
function fill(r,g,b){
    let c = hexColor(r,g,b);
    ctx.fillStyle = c;
    ctx.fill();
}

//Just an example to show how it works
function drawBall(){
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);

    //EXAMPLE OF USING (R,G,B) LIKE IN p5.js
    fill(0,133,444); 
}

let colo = "blue";
ctx.Style=`${colo}`;

let colo = 
arr[Math.floor(Math.random()*3)];
console.log(colo);
ctx.fillStyle=`${colo}`;