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

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

代码语言：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  .........完整代码请登录后点击上方下载按钮下载查看