canvas实现无尽循环动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现无尽循环动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body translate="no"> <script > const dpr = Math.max(1, .5 * window.devicePixelRatio); const canvas = document.createElement("canvas"); document.body.innerHTML = ""; document.body.appendChild(canvas); document.body.style = "margin:0;overflow:hidden;"; canvas.style.width = "100%"; canvas.style.height = "auto"; canvas.style.objectFit = "contain"; const vertexSource = `#version 300 es #ifdef GL_FRAGMENT_PRECISION_HIGH precision highp float; #else precision mediump float; #endif in vec4 position; void main(void) { gl_Position = position; } `; const fragmentSource = `#version 300 es /********* * made by Matthias Hurrle (@atzedent) */ precision highp float; out vec4 O; uniform vec2 resolution; uniform float time; #define R resolution #define T time #define TAU 6.312853 #define hue(a) (.6+.6*cos(25.13*(a)+vec3(0,83,21))) void main(void) { vec2 uv = (gl_FragCoord.xy-.5*R)/min(R.x, R.y); vec3 col = vec3(0); const float steps = 140.; float n = steps; for (float i = .0; i < steps; i++) { float k = i/steps; vec2 p = vec2(sin(k*TAU), cos(k*TAU)); p *= sin(-T+k*42.)*.35; float d = pow(distance(p, uv)*.5, i); if (d < n) { col = vec3(1.-k); n = d; } } col = hue(sqrt(col)); O = vec4(col, 1); } `; function compile(shader, source) { gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { console.error(gl.getShaderInfoLog(shader)); } } let gl,programs = [],vertices,buffer; function setup() { gl = canvas.getContext("webgl2"); const vs = gl.createShader(gl.VERTEX_SHADER); compile(vs, vertexSource); shaders = [fragmentSource]; programs = shaders.map(() => gl.createProgra.........完整代码请登录后点击上方下载按钮下载查看
网友评论0