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

时间:2018-08-18 21:39:40

标签: javascript canvas gradient

我目前正在为我正在创建的网站编写颜色选择器, 线性渐变似乎不会变成全白。 我正在使用画布来获取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]

1 个答案:

答案 0 :(得分:0)

几乎所有内容都偏移了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/