Программно использовать значения RGBa в fillStyle на «холсте»?

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


javascript canvas html
person John    schedule 24.12.2009    source источник
comment
Я нарушаю какие-либо правила или руководящие принципы здесь, тогда, пожалуйста, дайте мне знать осторожно, и я буду иметь это в виду в следующий раз... Единственное, что нужно усвоить, это то, что вежливо принять ответ, если кто-то предоставил ответ, который вы необходимость. Слева от каждого ответа, под счетом, вы должны увидеть большой вопросительный знак. Нажав на нее, вы пометите этот ответ как принятый, что даст вам и человеку, отвечающему на вопрос, небольшой бонус к репутации.   -  person Brian Campbell    schedule 24.12.2009
comment
Канун Рождества 2009 года. Вы получили ответ на свой вопрос в течение часа. В 2016 году вы еще не приняли. Должно быть, это была большая рождественская вечеринка!   -  person Stewart    schedule 19.10.2016

Ответы (5)


arrow_upward
98
arrow_downward

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

var r_a = 0.3; 
ctx.fillStyle = "rgba(32, 45, 21, " + r_a + ")";
person Christian C. Salvadó    schedule 24.12.2009
comment
Вы также можете использовать новые строки шаблона HTML: cts.fillStyle = `rgba(32, 45, 21, ${r_a})`;. Это позволяет интерполировать, что, похоже, вы и пытались сделать. - person trysis; 11.08.2015

arrow_upward
19
arrow_downward 

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

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

person Fabien Ménager    schedule 24.12.2009

arrow_upward
8
arrow_downward

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

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

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

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

person Simon Tewsi    schedule 28.03.2012
comment
в качестве небольшого изменения (с кодировкой = UTF-8), цвет = rgba(255, 255, 0, α); цвет.заменить(α, 0,5); // здесь можно использовать число - person QuentinUK; 24.02.2013

arrow_upward
3
arrow_downward 

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 на клавиатуре США.

person NicoWheat    schedule 08.12.2019

arrow_upward
0
arrow_downward

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