简体   繁体   English

创建一个水晶(或瓷砖马赛克?)渐变背景,大概使用画布(或svg?)

[英]Create a crystal (or tile mosaic?) gradient background , presumably using canvas (or svg?)

I want to programmatically create the following effect as the background of a div. 我想以编程方式创建以下效果作为div的背景。 Programmatically because I want the colors to be customizable. 以编程方式,因为我希望颜色可以自定义。 I'm not sure how to even get started thinking about this. 我不确定如何开始考虑这一点。 I know several ways to add a gradient as a background color, but I'm not sure how to do the "mosaic blur" thing at all, so I'm looking for some direction or tools that might be useful. 我知道几种将渐变添加为背景色的方法,但是我完全不确定如何进行“马赛克模糊”处理,因此我正在寻找可能有用的方向或工具。

“水晶”或渐变瓷砖马赛克背景

If there is a common name for that effect, please let me know so I can update the title and use it to ask Mr. Google how to get this done. 如果有一个常用的名称,请告诉我,以便我更新标题并使用它来询问Google先生如何完成此操作。

It looks like this is some kind of layer on top of a gradient, where the second layer magnifies or blunts or takes part of the color? 看起来这是渐变之上的某种层,其中第二层会放大或变钝或成为颜色的一部分?

not completely unrelated posts 不完全无关的帖子

Angular svg or canvas to use colour gradients 角度SVG或画布使用颜色渐变

It's fairly simple to do: 这很简单:

  • Create a primary linear gradient as background 创建一个主要的线性渐变作为背景
  • Using blending mode lighter (AKA add) to add transparent white circles, lines, other patterns, on top at large sizes 使用混合模式lighter (又名添加)在大尺寸顶部添加透明的白色圆圈,线条和其他图案

The lighter mode is not strictly necessary but it gives a nice effect of the patterns being light sources. 并非必须使用较亮的模式,但可以使图案成为光源,效果很好。

Conceptual demo 概念演示

 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> 

Since you want to access the elements programmatically, you're going to want to use either SVGs or Canvas. 由于要以编程方式访问元素,因此将要使用SVG或Canvas。

The images look like a series of transparent layers stacked over each other. 图像看起来像是一系列相互堆叠的透明层。 Look into using rgba for color. 考虑使用rgba进行颜色处理。 rgba is like rgb, but includes an alpha layer entered as a percentage at the end. rgba类似于rgb,但在末尾包含以百分比形式输入的Alpha图层。

That being said, if you take the top left as an example. 话虽如此,如果您以左上角为例。 There may be gradients involved, but it looks like a solid pink background with transparent orange circles running off canvas on both sides. 可能涉及渐变,但是看起来像是纯粉红色背景,透明的橙色圆圈在画布的两侧均流淌。 As they continue to overlap, you get the gradient 随着它们继续重叠,您会得到渐变

It's a little small to tell.. but that would be a place to start. 有点小..但这是一个起点。 All the others are variations on the same theme. 所有其他都是同一主题的变体。 Overlapping semi-transparent shapes. 重叠的半透明形状。

If you are looking for a direct copy, start by sampling colors from two points where you think there is a gradient first. 如果要查找直接副本,请从您认为首先存在渐变的两个点开始对颜色进行采样。 It could be your eyes deceiving you. 可能是您的眼睛在欺骗您。 The "gradient" you perceive may just be a solid color next to a dark and light area. 您感觉到的“渐变”可能只是纯色,靠近暗区和亮区。

a quick scribble how this could be made with SVG. 快速撰写说明如何使用SVG做到这一点。

 <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> 

Sry about the quality, I'm on the wrong computer. 抱歉,质量我在错电脑上。 I just made this quick example in an online SVG-editor (plus some cleanup) . 我只是在在线SVG编辑器(加上一些清理)中做了一个简单的例子。

Add more layer, maybe give the layer slightly different colors/alpha-values; 添加更多的图层,也许给该图层稍微不同的颜色/ alpha值; maybe add some curves, ... That's all up to you, to style this thing as you want. 也许添加一些曲线,...这完全取决于您,根据需要来设置此样式。

But you get the basic idea on how to build the effect. 但是您将获得有关如何建立效果的基本想法。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM