Javascript画布线性渐变不会变为全色
我目前正在为我正在制作的一个网站编写一个颜色选择器 线性渐变似乎不会变成全白色。 我正在使用画布获取RGB颜色数据。 看 如您所见,我得到的最大值为254。 我使用以下函数将渐变绘制到画布Javascript画布线性渐变不会变为全色,javascript,canvas,gradient,Javascript,Canvas,Gradient,我目前正在为我正在制作的一个网站编写一个颜色选择器 线性渐变似乎不会变成全白色。 我正在使用画布获取RGB颜色数据。 看 如您所见,我得到的最大值为254。 我使用以下函数将渐变绘制到画布 draw_color_square(hue){ var gradB = this.ctx.createLinearGradient(0, 0, 0, 255); gradB.addColorStop(0, "white"); gradB.addColorStop(1, "black")
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个像素。画布的宽度必须为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";
}
这里是提琴:您可以添加一个带有工作示例的JSFIDLE吗?当你做完后,请告诉我so@JorgeFuentesGonzález这里是jsfiddle:(注意,RGB以外的值还不起作用)@IBronchart答案对你有帮助吗?如果是,请检查是否接受。非常感谢。