创建一个水晶（或瓷砖马赛克？）渐变背景，大概是使用canvas（或svg？）

Question

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

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

看起来这是渐变顶部的某种层，第二层放大或钝化或占用了部分颜色？

并非完全不相关的帖子

Angular svg or canvas to use colour gradients

Answer 1

这很简单：

• 创建主线性渐变作为背景
• 使用混合模式lighter（AKA添加）在大尺寸上添加透明的白色圆圈，线条，其他图案

较轻的模式并非严格必要，但它可以使图案成为光源。

概念演示

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>

Answer 2

由于您希望以编程方式访问元素，因此您将要使用SVG或Canvas。

图像看起来像是一系列透明层叠在一起。 考虑使用rgba颜色。 rgba就像rgb，但包括在最后输入的alpha值。

话虽如此，如果你以左上角为例。可能涉及渐变，但它看起来像一个坚实的粉红色背景，两边都是透明的橙色圆圈。当它们继续重叠时，你会得到渐变

告诉它有点小......但这将是一个开始的地方。所有其他人都是同一主题的变体。重叠的半透明形状。

如果您正在寻找直接复制品，请先从您认为首先存在渐变的两点采样颜色。可能是你的眼睛欺骗了你。 ＆＃34;渐变＆＃34;你认为它可能只是一个黑暗和明亮区域旁边的纯色。

Answer 3

快速阅读如何使用SVG。

＆＃13;

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 580 400" style="background: blue;">
 <g style="fill: rgba(255, 0, 0, .15);">
  <path d="m-39.5-42.80l679.5,372.80l3,127l-684-27" />
  <path d="m620.5,6.19l-661.5,296.80l10,141l647-15" />
  <path d="m-14.5,100.19l615.5,234.80l-5,95c0.5,0.20-616.5-10.79-616.5-10.79" />
  <path d="m597.5,98.19l-628.5,253.80l6,82l638-9" />
  <path d="m-25.5,201.19l639.5,181.80l-8,56l-629-18" />
  <path d="m606.5,224.19l-647.5,164.80l5,51l645-9" />
 </g>
</svg>

＆＃13;

＆＃13;

＆＃13;

关于质量，我在错误的电脑上。我刚刚在一个在线SVG编辑器（加上一些清理）中做了这个简单的例子。

添加更多图层，可能会给图层稍微不同的颜色/ alpha值;也许添加一些曲线，......这完全取决于你，根据你的需要设计这个东西。

但是你得到了关于如何建立效果的基本想法。