javascript - 将浮点数转换为RGBA CSS颜色的有效Alpha值

我试图用在运行时确定的白色和动态颜色之间的单个线性渐变填充Canvas元素。

为此，我具有此函数，该函数接收一个浮点数作为参数，并且我试图将该变量插入RGBA颜色的alpha值中。

function setCanvas(fraction) {

    fraction = fraction.toFixed(2);
    context.rect(0, 0, canvas.width, canvas.height);
    var grad = context.createLinearGradient(0, 0, canvas.width, canvas.height);
    grad.addColorStop(0, '#FFFFFF');
    grad.addColorStop(1, 'rgba(255, 255, 255, fraction)'); // SYNTAX ERROR
    context.fillStyle = grad;
    context.fill();

  }

这是日志中的错误消息：

未捕获到的SyntaxError：无法在'CanvasGradient'上执行'addColorStop'：无法将提供的值（'rgba（255，255，255，分数）'）解析为颜色。

我可以记录小数的值，并且总是在0.0到1.0之间进行归一化，这就是documentation所需要的...但是如果我将相同的值（例如0.76）静态键入我的RGBA颜色中，然后一切都畅通无阻...

我是否缺少明显的东西？为什么这不起作用？

最佳答案

我想你打算这样做

grad.addColorStop(1, 'rgba(255, 255, 255, ' + fraction+ ')');

您要包括字符串分数而不是值。

关于javascript - 将浮点数转换为RGBA CSS颜色的有效Alpha值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28405643/