我想以编程方式创建以下效果作为 div 的背景。以编程方式,因为我希望颜色可以自定义。我不知道如何开始思考这个问题。我知道有几种添加渐变作为背景颜色的方法,但我根本不知道如何做“马赛克模糊”,所以我正在寻找一些可能有用的方向或工具。
如果该效果有一个通用名称,请告诉我,以便我更新标题并用它来询问 Google 先生如何完成此操作。
看起来这是渐变顶部的某种层,其中第二层放大或减弱或占用部分颜色?
并非完全不相关的帖子
最佳答案
做起来相当简单:
- 创建主线性渐变作为背景
- 使用混合模式
较亮
(又名添加)在大尺寸的顶部添加透明的白色圆圈、线条和其他图案
打火机模式并不是绝对必要的,但它可以提供很好的图案作为光源的效果。
概念演示
var ctx = c.getContext("2d");
// background gradient
var gr = ctx.createLinearGradient(0,0,0,c.height);
gr.addColorStop(0, "#007");
gr.addColorStop(1, "#909");
ctx.fillStyle = gr;
ctx.fillRect(0, 0, c.width, c.height);
// Additive overlays
ctx.fillStyle = "rgba(255,255,255,0.05)";
ctx.globalCompositeOperation = "lighter";
ctx.translate(c.width>>1, 0); // move origin to center so we can mirror
for(var r = c.height, x; r > 20; r -= c.height/5) {
x = Math.random() * c.width * 1.5
ctx.beginPath();
ctx.arc(x, c.height, r, 0, 6.28);
ctx.fill();
ctx.scale(-1,1); // mirror, draw same on top
ctx.beginPath();
ctx.arc(x, c.height, r, 0, 6.28);
ctx.fill();
}
<h3>Hit run again to create a new random pattern</h3>
<canvas id=c width=150 height=300></canvas>
关于javascript - 创建 Crystal (或瓷砖马赛克?)渐变背景,大概使用 Canvas (或 svg?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45570272/