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

Question

我正在尝试使用白色和将在运行时确定的动态颜色之间的单个线性渐变填充 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, fraction)') 解析为颜色。

我可以记录 fraction 的值，它始终在 0.0 和 1.0 之间进行标准化，这就是 documentation 所说的需要...但是如果我静态输入相同的值（ 0.76，例如）到我的 RGBA 颜色中，然后一切正常...

我是否遗漏了一些明显的东西？为什么这不起作用？

Answer 1

我想你是故意的

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

您包含的是字符串分数而不是值。