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()参数表达的详细信息。有谁可以帮我这个？

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颜色的有效值。你想要一个可以转换为float的String。所以你可以这样测试：

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

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

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

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