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