Javascript画布线性渐变不会全彩色答案

【问题标题】：Javascript canvas linear gradient not going to full colorJavascript画布线性渐变不会全彩色
【发布时间】：2018-08-18 21:39:39
【问题描述】：

我目前正在为我正在制作的网站编写颜色选择器，并且线性渐变似乎不会变成全白。我正在使用画布来获取 RGB 颜色数据。见this screenshot

如您所见，我得到的最大值为 254。我使用以下函数将渐变绘制到画布上。

draw_color_square(hue){
    var gradB = this.ctx.createLinearGradient(0, 0, 0, 255);
    gradB.addColorStop(0, "white");
    gradB.addColorStop(1, "black");

    var gradC = this.ctx.createLinearGradient(0,0,255,0);
    gradC.addColorStop(0, "hsla(" + hue + ",100%,50%,0)");
    gradC.addColorStop(1, "hsla(" + hue + ",100%,50%,1)");

    this.ctx.fillStyle = gradB;
    this.ctx.fillRect(0, 0, 255, 255);
    this.ctx.fillStyle = gradC;
    this.ctx.globalCompositeOperation = "multiply";
    this.ctx.fillRect(0, 0, 255, 255);
    this.ctx.globalCompositeOperation = "source-over";
}

我已检查滑块是否转到位置 [0, 0]

【问题讨论】：

你能添加一个带有工作示例的 jsFiddle 吗？完成后提及我
@JorgeFuentesGonzález 这是 jsfiddle：jsfiddle.net/r1ka8ejx/29（请注意，除了 RGB 以外的值还不起作用）

标签： javascript canvas gradient

【解决方案1】：

几乎所有东西都移动了 1 个像素。画布的宽度必须为 256 像素，并且您已将其设置为 255 像素。您的 fillrect 仅填充 255 像素宽度，并且您的渐变从像素 0（据我所见不存在）开始直到像素 255。我已经更新了所有内容以使其按预期工作。

最重要的部分是这个：

draw_color_square(hue){
    var gradB = this.ctx.createLinearGradient(1, 1, 1, 256);
    gradB.addColorStop(0, "white");
    gradB.addColorStop(1, "black");

    var gradC = this.ctx.createLinearGradient(1,1,256,1);
    gradC.addColorStop(0, "hsla(" + hue + ",100%,50%,0)");
    gradC.addColorStop(1, "hsla(" + hue + ",100%,50%,1)");

    this.ctx.fillStyle = gradB;
    this.ctx.fillRect(0, 0, 256, 256);
    this.ctx.fillStyle = gradC;
    this.ctx.globalCompositeOperation = "multiply";
    this.ctx.fillRect(0, 0, 256, 256);
    this.ctx.globalCompositeOperation = "source-over";
}

这里是小提琴：https://jsfiddle.net/r1ka8ejx/45/

【讨论】：

@IBronchart 答案对您有帮助吗？如果是这样，请检查它是否已接受。谢谢！