RGBA颜色混浊动画表达

问题描述：

我有一个问题是，当我尝试添加颜色到我的画矩形：RGBA颜色混浊动画表达

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

在我的画矩形的颜色是淡蓝色的，但是当我试图做出一些我的不透明度值修改使其半transperrant：

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()参数表达式的详细信息。是否有人请帮助我？

答

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。

感谢您的帮助！现在我明白了这一点，它仍然作为“rgba（0,102,153，”+ opacityVar/2 right？即使没有“）”最后， – mystreie

不，'''是'.fillStyle'字符串的重要组成部分。它让'rgba'设置知道你已经提供了参数。 – sonicblis

答

"opacityVar/2"

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

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

你的第二个代码所做的工作：

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

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