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();

  }

这是日志中的错误消息：

Uncaught SyntaxError：无法在'CanvasGradient'上执行'addColorStop'：提供的值（'rgba（255,255,255，fraction）'）无法解析为颜色。 < / p>

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

我错过了一些明显的东西吗？为什么这不起作用？

Answer 1

我认为你打算这样做

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

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

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

1 个答案: