HTML5画布覆盖透明渐变

Question

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

它由三个要素组成:

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

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

(我可以提供我的代码,但它非常通用,不会有用)

Answer 1

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

小提琴演示

水平渐变

从白色到您想要使用的颜色(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);

结果

首先绘制水平线然后在顶部绘制垂直线将导致:

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

希望这可以帮助.