javascript - 创建 Crystal (或瓷砖马赛克？)渐变背景，大概使用 Canvas (或 svg？)

Question

我想以编程方式创建以下效果作为 div 的背景。以编程方式，因为我希望颜色可以自定义。我不知道如何开始思考这个问题。我知道有几种添加渐变作为背景颜色的方法，但我根本不知道如何做“马赛克模糊”，所以我正在寻找一些可能有用的方向或工具。

如果该效果有一个通用名称，请告诉我，以便我更新标题并用它来询问 Google 先生如何完成此操作。

看起来这是渐变顶部的某种层，其中第二层放大或减弱或占用部分颜色？

并非完全不相关的帖子

Angular svg or canvas to use colour gradients

Answer 1

做起来相当简单:

• 创建主线性渐变作为背景
• 使用混合模式较亮(又名添加)在大尺寸的顶部添加透明的白色圆圈、线条和其他图案

打火机模式并不是绝对必要的，但它可以提供很好的图案作为光源的效果。

概念演示

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>