当我在HTML canvas属性中使用fillStyles时如何向rgba（）函数插入变量的数值？

Question

CSS中rgba（）函数的结果是什么？为什么用两个引号引起来？b变量是一个数字，为​​什么它周围有两个加号，为什么它也有双引号？

var size = 50;
var offset = 20;

for (var i = 0; i < 10; i = i + 1) {
  var b = i * 25;
  var rgba = "rgba(0, 0, " + b + ", 0.5)";
  c.fillStyle = rgba;
  c.fillRect(offset, offset, size, size);
  offset = offset + 20;
}

Answer 1

在var rgba = "rgba(0, 0, " + b + ", 0.5)";中，双引号不在+ b +周围，而是在rgba(0, 0,和, 0.5)周围，从而形成了此字符串表达式的两个固定部分，其中插入了b的值（自动转换为字符串后）。

此表达式生成一个类似于rgba(0, 0, 50, 0.5)的字符串（当i为2时，导致b为50）并将其存储在rgba变量中。

编辑让我们插入一些换行符以提高可读性：

var rgba = "rgba(0, 0, " + 
            b + 
            ", 0.5)";

表达式由三个部分组成，这三个部分相加在一起：一个字符串常量（“ rgba（0，0，”），（数字类型）变量b和另一个字符串常量（“，0.5）”）。结果将是一个字符串。

+运算符可以是arithmetic operator或（在此使用）string concatenation operator。

因为要添加字符串和数字，所以正在使用字符串串联（而不是算术加法），并且该数字首先转换为字符串。结果是一个字符串，表达式的第三部分添加到该字符串。

将结果（"rgba(...)"）分配给c.fillStyle，其中interprets为颜色。