HTML5画布叠加透明渐变
凯文
我正在HTML5中创建颜色选择器，例如下面的渐变
它包含三个元素：
- 稳定的红色背景色（必须可变）
- 从底部到顶部的黑色透明渐变
- 从左到右的白色透明渐变
我设法创建了一个渐变和一种颜色，但是我不知道如何将纯色和两个渐变叠加在一起。我该怎么做？
（我可以提供我的代码，但是它很通用，不会有用）
用户名
您可以将两个渐变相互叠加：
水平渐变
从白色变为要使用的颜色（色相度），并具有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);
结果
首先绘制水平然后在顶部绘制垂直将导致以下结果：
与演示中一样，创建滑块来更新色调调色板很容易。您无需像演示中那样重新创建从黑色到透明的渐变-只需将其缓存到屏幕外的画布上，并在每次更新时重新使用它，因为这样可以为您带来更高的性能。
希望这可以帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
HTML5画布叠加图像
- 2
沿HTML5画布路径的连续渐变
- 3
透明颜色HTML5画布
- 4
HTML5画布使黑色透明
- 5
禁用html5画布
- 6
了解HTML5画布
- 7
禁用html5画布
- 8
HTML5画布脉动
- 9
HTML5画布脉动
- 10
在HTML5画布背景上叠加两个Divs的问题
- 11
使用javascript为HTML5画布创建动态对角线渐变？
- 12
html5画布渐变为4个角
- 13
如何在HTML5画布中显示更平滑的渐变？
- 14
在HTML5画布中的鼠标移动上绘制半透明线
- 15
HTML5画布使圆圈在画布内闪烁
- 16
使用HTML5画布的三角形每个顶点处的渐变
- 17
HTML5画布，适合（其余）屏幕
- 18
HTML5画布图像变色
- 19
html5画布圆圈调色板
- 20
使用WebRTC流HTML5画布活动
- 21
在html5画布内制作重力效果
- 22
DOM循环中的HTML5画布
- 23
Html5画布中的FadeIn FadeOut
- 24
HTML5画布像素处理
- 25
html5画布中心圆
- 26
使用HTML5画布的静态/噪声动画
- 27
拖放到HTML5画布
- 28
替代HTML5画布清除方法
- 29
使用HTML5画布的游戏
我来说两句