Javascript畫布線性漸變不會全彩色

Question

我目前正在為正在制作的網站編寫顏色選擇器，線性漸變似乎不會變為全白。 我正在使用畫布來獲取RGB顏色數據。 看這個截圖

如您所見，我得到的最大值為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]

Answer 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/