Программно использовать значения RGBa в fillStyle в <canvas>?

Используя <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 с использованием некоторой переменной вместо явного определения значений?

Ответ 1

Вам просто нужно объединить переменную r_a, чтобы правильно построить строку:

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

Ответ 2

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

Это конкатенация строк.

Ответ 3

Я очень опаздываю на вечеринку, но у меня была аналогичная проблема, и я решил ее немного по-другому, что может быть полезно.

Поскольку мне нужно было повторно использовать цвета заливки на разных альфа-уровнях, я использовал метод замены JavaScript:

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

Очевидно, что это не должен быть альфа-уровень, который меняется, это может быть один из других каналов.

Ответ 4

Я искал что-то похожее и наткнулся на ваш пост, прочитав его, я придумал для себя решение, я работаю с аудио 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