HTML5画布覆盖透明渐变

Question

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

它由三个要素组成：

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

我设法创建了单个渐变和单个颜色，但我无法弄清楚如何将纯色和两个渐变叠加在一起。我怎么能做到这一点？

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

Answer 1

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

<强> Fiddle demo

水平渐变

从白色到你想要使用的100％饱和度和50％亮度的颜色（HUE度）：

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中，可以轻松创建滑块来更新色调调色板。您不需要像在演示中那样重新创建黑色到透明的渐变 - 只需将其缓存到屏幕外的画布并为每次更新重复使用它，因为这样可以提高性能。

希望这有帮助。

Answer 2

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

我根据此jsfiddle创建了answer。它仍然倾斜，但我认为你可以自己解决这个问题：

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>