首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Javascript画布线性渐变不会变成全色

Javascript画布线性渐变不会变成全色
EN

Stack Overflow用户
提问于 2018-08-19 05:39:40
回答 1查看 240关注 0票数 0

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

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

代码语言:javascript
复制
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

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-08-19 07:45:51

你几乎所有的东西都移动了1个像素。画布的宽度必须为256像素,您将其设置为255像素。填充which只填充255个像素的宽度,而渐变从像素0(据我所知还不存在)开始,直到255像素。我已经更新了一切,让它能像预期的那样工作。

最重要的部分是这一部分:

代码语言:javascript
复制
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/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51912760

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档