rgba颜色不透明度动画表达

Question

我有一个问题是关于何时尝试向绘制矩形添加颜色：

    ctx.fillStyle = "rgba(0,102,153,1)";
    ctx.fillRect(100,100,100,100);

我的绘图矩形中的颜色是浅蓝色，但是当我试图对我的不透明度值进行一些修改以使其半透明时：

    var opacityVar = 1;
    ctx.fillStyle = "rgba(0,102,153,opacityVar/2)";
    ctx.fillRect(100,100,100,100);

这根本不起作用，直到我尝试：

    var opacityVar = 1;
    ctx.fillStyle = "rgba(0,102,153,"+opacityVar/2+")";
    ctx.fillRect(100,100,100,100);

这很好用，我的问题是为什么我需要在 opacityVar/2 变量之间添加双 " 标记和 +？

我正在尝试四处搜索，但似乎没有关于 rgba() 参数的详细信息 expression.Would 谁能帮我解决这个问题？

Answer 1

ctx.fillStyle 是一个字符串。您正在尝试将 javascript 作为字符串的一部分执行。为此，您必须在字符串外部执行 javascript，然后将其连接到您的字符串中。

this is a string   -> "rgba(0,102,153,"
this is javascript -> opacityVar/2
this is a string   -> ")"

+ 将您的字符串和 javascript 结果连接成一个字符串。 " 告诉引擎您的字符串从哪里开始和结束。

您现在也可以在 javascript 中使用 template literals。

Answer 2

 "opacityVar/2"

不是 rgba 颜色的有效值。你想要一个可以转换为浮点数的字符串。所以你可以这样测试：

parseFloat("opacityVar/2") // NaN => not a number

您的第二个代码确实有效：

parseFloat( ""+(opacityVar/2));// 0.5 => a valid number

因为它的计算结果是一个有效的数字。

rgba color opacity animation expression