webgl+canvas实现炫酷柔和多彩背景动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现炫酷柔和多彩背景动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <style>
        * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	height: 100vh;
    	width: 100%;
    	display: grid;
    	place-items: stretch;
    }
    
    #gradient-canvas {
    	height: 100vh;
    	width: 100%;
    	background: lightgrey;
    }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <canvas style="--gradient-color-1:#ef008f;--gradient-color-2:#6ec3f4;--gradient-color-3:#7038ff;--gradient-color-4:#e2e2e2;" id="gradient-canvas" data-transition-in></canvas>

    <script>
        window.addEventListener('DOMContentLoaded', (e) => {
        		var gradient = new Gradient;
        		gradient.initGradient("#gradient-canvas");
        	});
    </script>
    <!-- partial -->
    <script>
        // https://kevinhufnagl.com/wp-content/themes/lightisol/dist/js/min/lightisol-gradient.min.js?ver=1.0
    //
    
    function normalizeColor(hexCode) {
    	return [
    		((hexCode >> 16) & 255) / 255,
    		((hexCode >> 8) & 255) / 255,
    		(255 & hexCode) / 255
    	];
    }
    ["SCREEN", "LINEAR_LIGHT"].reduce(
    	(hexCode, t, n) => Object.assign(hexCode, { [t]: n }),
    	{}
    );
    class MiniGl {
    	constructor(canvas, width, height, debug = !1) {
    		const _miniGl = this,
    			debug_output =
    				-1 !== document.location.search.toLowerCase().indexOf("debug=webgl");
    		(_miniGl.canvas = canvas),
    			(_miniGl.gl = _miniGl.canvas.getContext("webgl", { antialias: !0 })),
    			(_miniGl.meshes = []);
    		const context = _miniGl.gl;
    		width && height && this.setSize(width, height),
    			_miniGl.lastDebugMsg,
    			(_miniGl.debug =
    				debug && debug_output
    					? function (e) {
    							const t = new Date();
    							t - _miniGl.lastDebugMsg > 1e3 && console.log("---"),
    								console.log(
    									t.toLocaleTimeString() +
    										Array(Math.max(0, 32 - e.length)).join(" ") +
    										e +
    										": ",
    									...Array.from(arguments).slice(1)
    								),
    								(_miniGl.lastDebugMsg = t);
    					  }
    					: () => {}),
    			Object.defineProperties(_miniGl, {
    				Material: {
    					enumerable: !1,
    					value: class {
    						constructor(vertexShaders, fragments, uniforms = {}) {
    							const material = this;
    							function getShaderByType(type, source) {
    								const shader = context.createShader(type);
    								return (
    									context.shaderSource(shader, source),
    									context.compileShader(shader),
    									context.getShaderParameter(shader, context.COMPILE_STATUS) ||
    										console.error(context.getShaderInfoLog(shader)),
    									_miniGl.debug("Material.compileShaderSource", { source: source }),
    									shader
    								);
    							}
    							function getUniformVariableDeclarations(uniforms, type) {
    								return Object.entries(uniforms)
    									.map(([uniform, value]) => value.getDeclaration(uniform, type))
    									.join("\n");
    							}
    							(this.uniforms = uniforms), (this.uniformInstances = []);
    							const prefix = "\n              precision highp float;\n            ";
    							(this.vertexSource = `\n              ${prefix}\n              attribute vec4 position;\n              attribute vec2 uv;\n              attribute vec2 uvNorm;\n              ${getUniformVariableDeclarations(
    								_miniGl.commonUniforms,
    								"vertex"
    							)}\n              ${getUniformVariableDeclarations(
    								uniforms,
    								"vertex"
    							)}\n              ${vertexShaders}\n            `),
    								(this.Source = `\n              ${prefix}\n              ${getUniformVariableDeclarations(
    									_miniGl.commonUniforms,
    									"fragment"
    								)}\n              ${getUniformVariableDeclarations(
    									uniforms,
    									"fragment"
    								)}\n              ${fragments}\n            `),
    								(this.vertexShader = getShaderByType(
    									context.VERTEX_SHADER,
    									this.vertexSource
    								)),
    								(this.fragmentShader = getShaderByType(
    									context.FRAGMENT_SHADER,
    									this.Source
    								)),
    								(this.program = context.createProgram()),
    								context.attachShader(this.program, this.vertexShader),
    								context.attachShader(this.program, this.fragmentShader),
    								context.linkProgram(this.program),
    								context.getProgramParameter(this.program, context.LINK_STATUS) ||
    									console.error(context.getProgramInfoLog(this.program)),
    								context.useProgram(this.program),
    								this.attachUniforms(void 0, _miniGl.commonUniforms),
    								this.attachUniforms(void 0, this.uniforms);
    						}
    						attachUniforms(name, uniforms) {
    							const material = this;
    							void 0 === name
    								? Object.entries(uniforms).forEach(([name, uniform]) => {
    										material.attachUniforms(name, uniform);
    								  })
    								: "array" == uniforms.type
    								? uniforms.value.forEach((uniform, i) =>
    										material.attachUniforms(`${name}[${i}]`, uniform)
    								  )
    								: "struct" == uniforms.type
    								? Object.entries(uniforms.value).forEach(([uniform, i]) =>
    										material.attachUniforms(`${name}.${uniform}`, i)
    								  )
    								: (_miniGl.debug("Material.attachUniforms", {
    										name: name,
    										uniform: uniforms
    								  }),
    								  material.uniformInstances.push({
    										uniform: uniforms,
    										location: context.getUniformLocation(material.program, name)
    								  }));
    						}
    					}
    				},
    				Uniform: {
    					enumerable: !1,
    					value: class {
    						constructor(e) {
    							(this.type = "float"),
    								Object.assign(this, e),
    								(this.typeFn =
    									{
    										float: &q.........完整代码请登录后点击上方下载按钮下载查看