webgl+canvas实现线条波纹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：webgl+canvas实现线条波纹动画效果代码

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

<!DOCTYPE html>
<html lang="en" >
<head>
<style>
    html, body {
	overflow: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background:#000;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background:#000;
}
</style>
  <script>
"use strict";
// webGL line_strip
const webGL = {
	init(options) {
		this.elem = document.querySelector("canvas");
		this.gl = (
			this.elem.getContext("webgl", options) ||
			this.elem.getContext("experimental-webgl", options)
		);
		if (!this.gl) return false;
		const vertexShader = this.gl.createShader(this.gl.VERTEX_SHADER);
		this.gl.shaderSource(vertexShader, `
			precision highp float;
			attribute vec2 aPosition;
			uniform vec3 uHSV;
			uniform vec2 uResolution;
			varying vec4 vColor;
			vec3 hsv2rgb(vec3 c) {
				vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
				vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
				return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
			}
			void main() {
				gl_PointSize = 1.0;
				gl_Position = vec4(
					( aPosition.x / uResolution.x * 2.0) - 1.0, 
					(-aPosition.y / uResolution.y * 2.0) + 1.0, 
					0.0,
					1.0
				);
				vColor = vec4(hsv2rgb(uHSV), 1.0);
			}
		`);
		this.gl.compileShader(vertexShader);
		const fragmentShader = this.gl.createShader(this.gl.FRAGMENT_SHADER);
		this.gl.shaderSource(fragmentShader, `
			precision highp float;
			varying vec4 vColor;
			void main() {
				gl_FragColor = vColor;
			}
		`);
		this.gl.compileShader(fragmentShader);
		this.program = this.gl.createProgram();
		this.gl.attachShader(this.program, vertexShader);
		this.gl.attachShader(this.program, fragmentShader);
		this.gl.linkProgram(this.program);
		this.gl.useProgram(this.program);
		this.aPosition = this.gl.getAttribLocation(this.program, "aPosition");
		this.gl.enableVertexAttribArray(this.aPosition);
		this.positionBuffer = this.gl.createBuffer();
		this.uHSV = this.gl.getUniformLocation(this.program, "uHSV");
		this.gl.enableVertexAttribArray(this.uHSV);
		this.resize();
		window.addEventListener("resize", () => this.resize(), false);
		return this;
	},
	resize () {
		const dpr = window.devicePixelRatio || 1;
		this.width = this.elem.width = this.elem.offsetWidth * dpr;
		this.height = this.elem.height = this.elem.offsetHeight * dpr;
		const uResolution = this.gl.getUniformLocation(this.program, "uResolution");
		this.gl.enableVertexAttribArray(uResolution);
		this.gl.uniform2f(uResolution, this.width, this.height);
		this.gl.viewport(0, 0,
			this.gl.drawingBufferWidth,
			this.gl.drawingBufferHeight
		);
	},
	blend (s, d) {
		this.gl.blendFunc(s, d);
		this.gl.enable(this.gl.BLEND);
	},
	createBufferLine (len) {
		this.num = len;
		this.bufferLine = new Float32Array(len * 2);
	},
	beginPath () {
		this.k = 0;
	},
	strokeStyle (h, s, v) {
		this.gl.uniform3f(this.uHSV, h, s, v);
	},
	lineTo (x, y) {
		this.bufferLine[this.k++] = x;
		this.bufferLine[this.k++] = y;
	},
	stroke () {
		this.gl.bindBuffer(this.gl.ARRAY_BUFFER, this.positionBuffer);
		this.gl.vertexAttribPointer(this.aPosition, 2, this.gl.FLOAT, false, 0, 0);
		this.gl.bufferData(
			this.gl.ARRAY_BUFFER,
			this.bufferLine,
			this.gl.DYNAMIC_DRAW
		);
		this.gl.drawArrays(this.gl.LINE_STRIP, 0, this.num);
	},
	enableFullscreen(style) {

		if (
			document.fullscreenEnabled ||
			document.webkitFullscreenEnabled ||
			document.mozFullScreenEnabled ||
			document.msFullscreenEnabled
		) {
			this.bfs = document.createElement("button");
			this.bfs.appendChild(document.createTextNode("Fullscreen"));
			this.elem.parentElement.appendChild(this.bfs);
			for (let s in style) this.bfs.style[s] = style[s];
			this.bfs.addEventListener('click', e => {
				e.preventDefau.........完整代码请登录后点击上方下载按钮下载查看