javascript - 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 结果连接成一个字符串。 " 告诉引擎字符串的开始位置和结束位置。

您还可以使用template literals现在使用 JavaScript。