我正在 HTML5 中创建一个颜色选择器,如下面的渐变
它由三个元素组成:
- 纯红色背景色(必须可变)
- 从下到上的黑色透明渐变
- 从左到右的白色透明渐变
我已经设法创建了一个渐变和一个颜色,但我不知道如何将纯色和两个渐变叠加在一起。我怎样才能做到这一点?
(我可以提供我的代码,但它非常通用并且不会有用)
最佳答案
您可以将两个渐变叠加在一起:
水平渐变
以 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创建一个 slider 来更新色调调色板很容易。您不需要像演示中那样重新创建黑色到透明的渐变 - 只需将其缓存到屏幕外 Canvas 并在每次更新时重新使用它,因为这样可以提高性能。
希望这对您有所帮助。
关于HTML5 Canvas 叠加透明渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21771939/