根据webgl和canvas的HTML5高新科技美好波浪纹动态性线框动画特效动漫情况编码，色调任意，可设定色调，色调方式根据HSV。下边编码就是本软件的所有內容，因此也不出示免费下载详细地址了。
应用方式 1、在必须显示信息本canvas的地区添加下边编码，尺寸可自身设定，还可以用css界定：

 canvas width="1363" height="937" id="waves" /canvas 

2、在网页页面底端添加下边的js

"use strict";
const webGL = {
 init(options) {
 this.elem = document.querySelector("#waves");
 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,
 vColor = vec4(hsv2rgb(uHSV), 1.0);
 pileShader(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;
 pileShader(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 () {
 this.width = this.elem.width = this.elem.offsetWidth;
 this.height = this.elem.height = this.elem.offsetHeight;
 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);
 const perlin = {
 init() {
 this.p = new Uint8Array(512);
 const p = new Uint8Array(256);
 for (let i = 0; i 256; i++) p[i] = i;
 for (let i = 255; i i--) {
 const n = Math.floor((i + 1) * Math.random());
 [p[i], p[n]] = [p[n], p[i]];
 for (let i = 0; i 512; i++) this.p[i] = p[i 255];
 fade(t) {
 return t * t * t * (t * (t * 6 - 15) + 10);
 lerp(t, a, b) {
 return a + t * (b - a);
 grad(hash, x, y, z) {
 const h = hash 15;
 const u = h 8 ? x : y;
 const v = h 4 ? y : h == 12 || h == 14 ? x : z;
 return ((h 1) == 0 ? u : -u) + ((h 2) == 0 ? v : -v);
 noise(xi, yi, zi) {
 const X = Math.floor(xi) 255;
 const Y = Math.floor(yi) 255;
 const Z = Math.floor(zi) 255;
 const x = xi - Math.floor(xi);
 const y = yi - Math.floor(yi);
 const z = zi - Math.floor(zi);
 const u = this.fade(x);
 const v = this.fade(y);
 const w = this.fade(z);
 const A = this.p[X] + Y;
 const AA = this.p[A] + Z;
 const AB = this.p[A + 1] + Z;
 const B = this.p[X + 1] + Y;
 const BA = this.p[B] + Z;
 const BB = this.p[B + 1] + Z;
 return this.lerp(
 this.lerp(
 this.lerp(u, this.grad(this.p[AA], x, y, z), this.grad(this.p[BA], x - 1, y, z)),
 this.lerp(u, this.grad(this.p[AB], x, y - 1, z), this.grad(this.p[BB], x - 1, y - 1, z))
 this.lerp(
 this.lerp(u, this.grad(this.p[AA + 1], x, y, z - 1), this.grad(this.p[BA + 1], x - 1, y, z - 1)),
 this.lerp(
 this.grad(this.p[AB + 1], x, y - 1, z - 1),
 this.grad(this.p[BB + 1], x - 1, y - 1, z - 1)
 const canvas = webGL.init({
 alpha: false,
 stencil: false,
 antialias: false,
 depth: false,
 canvas.blend(canvas.gl.ONE, canvas.gl.ONE);
 perlin.init();
 canvas.createBufferLine(100);
 let z = 0;
 function run() {
 const sw = canvas.width / 100;
 const sh = sw * 30;
 for (let i = 0; i 180; i++) {
 canvas.beginPath();
 canvas.strokeStyle(
 z + i / 360,
 0.5,
 for (let j = -50; j j++) {
 const h = perlin.noise(j * 0.05, z - i * 0.01, z);
 canvas.lineTo(
 canvas.width * 0.5 + 0.01 * (i + 180) * j * sw * 0.5,
 -90 + i + canvas.height * 0.5 + h * sh
 canvas.stroke();
 z += 0.0025;
 requestAnimationFrame(run);
 run();
}

3、假如要改动色调，能够在js编码中寻找canvas.strokeStyle，改动里边的值，色调方式为HSV。

本站內容假如沒有标明出處，全部权均归本网站，出示完全免费免费下载使用，但不可用以商业服务赢利。假如标明出處，则来源于于互连网，本网站不做商业服务主要用途。假如本网站有內容侵害到您的利益，请致函网站站长电子邮箱，本网站当马上删掉。

联络大家