将浮点数转换为 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();

  }

这是日志中的错误消息：

未捕获语法错误：无法在 'CanvasGradient' 上执行 'addColorStop'：提供的值 ('rgba(255, 255, 255, fraction)') 无法解析为颜色。

我可以记录分数的值，它总是在 0.0 和 1.0 之间归一化，这就是 documentation 说它需要的...但是如果我在我的 RGBA 颜色中静态输入相同的值（例如 0.76），然后一切正常...

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

Answer 1

我想你是故意的

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

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

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

Turn floating point number into a valid Alpha value for an RGBA CSS colour

javascript

html

css

canvas