HTML5画布覆盖透明渐变

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

它由三个要素组成：

1. 纯红色背景色（必须可变）
2. 从下到上黑-透明渐变
3. 从左到右白色透明渐变

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

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

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

小提琴演示 https://jsfiddle.net/epistemex/bp2rfpew/

水平渐变

从白色变为您想要使用 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);

Vertical

从底部黑色到顶部透明。

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);

Result

先画水平线，然后在顶部画垂直线，结果如下：

正如在demo http://jsfiddle.net/AbdiasSoftware/ghkD9/创建一个滑块来更新色调调色板很容易。您不需要像演示中那样重新创建黑色到透明的渐变 - 只需将其缓存到屏幕外画布并在每次更新时重新使用它，因为这会给您带来更多的性能。

希望这可以帮助。