js通过canvas实现梵高星空中行云流水动画效果代码-html代码-BFW代码库

js通过canvas实现梵高星空中行云流水动画效果代码

代码语言：html

所属分类：动画

代码描述：js通过canvas实现梵高星空中行云流水动画效果代码

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

<html>

<head>
    <style>
        body {
          background-color: #000;    
          margin: 0;
          overflow: hidden;
          background-repeat: no-repeat;
        }
    </style>

</head>

<body><canvas id="canvas"></canvas>
    <script>
        var canvas = document.getElementById("canvas");
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        // Initialize the GL context
        var gl = canvas.getContext('webgl');
        if(!gl){
          console.error("Unable to initialize WebGL.");
        }
        
        //Time
        var time = 0.0;
        
        //************** Shader sources **************
        
        var vertexSource = `
        attribute vec2 position;
        void main() {
          gl_Position = vec4(position, 0.0, 1.0);
        }
        `;
        
        var fragmentSource = `
        precision highp float;
        
        #define AA
        
        uniform float width;
        uniform float height;
        vec2 resolution = vec2(width, height);
        
        uniform float time;
        
        void main(){
        
        	float strength = 0.4;
        	float t = time/6.0;
        
        	vec3 col = vec3(0);
        	vec2 fC = gl_FragCoord.xy;
        
        	#ifdef AA
        	for(int i = -1; i <= 1; i++) {
        		for(int j = -1; j <= 1; j++) {
        
        			fC = gl_FragCoord.xy+vec2(i,j)/3.0;
        
        			#endif
        
        			//Normalized pixel coordinates (from 0 to 1)
        			vec2 pos = fC/resolution.xy;
        
        			pos.y /= resolution.x/resolution.y;
        			pos = 4.0*(vec2(0.5) - pos);
        
        			for(float k = 1.0; k < 7.0; k+=1.0){ 
        				pos.x += strength * sin(2.0*t+k*1.5 * pos.y)+t*0.5;
        				pos.y += strength * cos(2.0*t+k*1.5 * pos.x);
        			}
        
        			//Time varying pixel colour
        			col += 0.5 + 0.5*cos(time+pos.xyx+vec3(0,2,4));
        
        			#ifdef AA
        		}
        	}
        
        	col /= 9.0;
        	#endif
        
          //Gamma
          col = pow(col, vec3(0.4545));
        
        	//Fragment colour
        	gl_FragColor = vec4(col,1.0);
        }
        `;
        
        //************** Utility functions **************
        
        window.addEventListener( 'resize', onWindowResize, false );
        
        function onWindowResize(){
          canvas.width  = window.innerWidth;
          canvas.height = window.innerHeight;
        	gl.viewport(0, 0, canvas.width, canvas.height);
          gl.uniform1f(widthHandle, window.innerWidth);
          gl.uniform1f(heightHandle, window.innerHeight);
        }
        
        
        //Compile shader and combine with source
        function compileShader(shaderSource, shaderType){
          var shader = gl.createShader(shaderType);
          gl.shaderSource(shader, shaderSource);
          gl.compileShader(shader);
          if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){
          	throw "Shader compile failed with: " + gl.getShaderInfoLog(shader);
          }
          return shader;
     .........完整代码请登录后点击上方下载按钮下载查看