Question

使用<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值的值而不是显式定义值？

Answer 1

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

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

Answer 2

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

这是字符串连接。

Answer 3

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

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

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

显然，它不一定是变化的alpha级别，它可能是其他渠道之一。

Answer 4

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的左侧找到反引号''。

Answer 5

我正在寻找类似的东西，并且在阅读之后遇到了你的帖子，我想出了一个自己的解决方案，我正在使用音频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

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

5 个答案: