HTML5 画布覆盖透明渐变答案

【问题标题】：HTML5 canvas overlay transparent gradientsHTML5 画布覆盖透明渐变
【发布时间】：2014-03-13 09:01:37
【问题描述】：

我正在 HTML5 中创建一个颜色选择器，如下面的渐变

它由三个元素组成：

纯红色背景色（必须可更改）
黑色 - 从底部到顶部的透明渐变
从左到右的白色透明渐变

我设法创建了一个渐变和一个颜色，但我不知道如何将纯色和两个渐变叠加在一起。我怎样才能做到这一点？

（我可以提供我的代码，但它非常通用，没有用处）

【问题讨论】：

标签： html canvas html5-canvas gradient color-picker

【解决方案1】：

您可以将两个渐变叠加在一起：

Fiddle demo

水平渐变

从白色到您想要使用的颜色（HUE 度数），饱和度为 100%，亮度为 50%：

var grH = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0);
grH.addColorStop(0, '#fff');
grH.addColorStop(1,  'hsl(' + hue + ', 100%, 50%)');

ctx.fillStyle = grH;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

垂直

从黑色底部到顶部透明。

var grV = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
grV.addColorStop(0, 'rgba(0,0,0,0)');
grV.addColorStop(1,  '#000');

ctx.fillStyle = grV;
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);

结果

先画水平线，再画垂直线，结果如下：

就像在demo 中一样，创建一个滑块来更新色调调色板很容易。您无需像演示中那样重新创建黑色到透明渐变 - 只需将其缓存到屏幕外画布并在每次更新时重新使用它，因为这样可以提高性能。

希望这会有所帮助。

【讨论】：

完美的答案，以及包含滑块的额外荣誉！ 395 是返回红色的真正最大值吗？我原以为它会是 255 之类的东西。
@Keavon 没问题！ :) 你的意思是色相值？也就是说，0-359 度 360=0 都是红色的。您从中获得的 RGB 值将在每个组件的 0-255 范围内。
是的，我在之前的评论中输入了错误的值，我的意思是我在滑块的最大值中看到的 359。 360 有意义！
fiddle 死了，太糟糕的代码不在这里了。

【解决方案2】：

我不认为颜色选择器使用你想出的方法是“正确的”。因为白色透明渐变会使左下角变成白色，但它应该是黑色的。

我基于这个answer 创建了一个jsfiddle。它仍然倾斜，但我认为您可以自己解决这个问题：

function draw(hue){
    var canvas = document.getElementById("hsl-square");
    var ctx = canvas.getContext('2d');
    for(row=0; row<=100; row++){
        var grad = ctx.createLinearGradient(0, 0, 100,0);
        grad.addColorStop(0, 'hsl('+hue+', 0%, '+(row)+'%)');
        grad.addColorStop(1, 'hsl('+hue+', 100%, '+(row/2)+'%)');
        ctx.fillStyle=grad;
        ctx.fillRect(0, row, 100, 1);
        console.log(row, row/2);
    }   
}

draw(64);

还有一个适用于大多数现代浏览器的新 html5 颜色输入：http://jsfiddle.net/4FMJM/1/

<form>
  Select  color: <input type="color" name="your-color">
  <input type="submit">
</form>

【讨论】：