html5 canvas迷幻水波浪流动背景动画特效

查看演示 下载资源 下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

js代码

<script id="fragmentShader" type="x-shader/fragment">
precision mediump float;

uniform float time;
uniform float width;
uniform float height;
uniform float red;
uniform float green;
uniform float blue;
uniform float zoom;
uniform float rotation;
  
const float PI = 3.141592654;

vec2 rotate(vec2 p, float a) {
  return vec2(p.x * cos(a) - p.y * sin(a),
                p.x * sin(a) + p.y * cos(a));
}
  
  
void main () {
  
  vec2 p0 = vec2(gl_FragCoord) * zoom;
  float a = rotation * PI / 180.0;
  vec2 p = rotate(p0, a) +
           vec2(sin(time * .2) * 200.0, cos(time * .2) * 200.0);
  vec3 c = vec3(red, green, blue);
  
  vec3 color = (c * (.5 + 0.5 * sin(time + sin(sin(time * 4.0 + (p.x - p.y) * .02) + p.x * p.y * 1e-4))));
  gl_FragColor = vec4(vec3(color), 1.0);
}
</script>
<script id="vertexShader" type="x-shader/vertex">
precision mediump float;
attribute vec2 position;

void main () {
  gl_Position = vec4(position, 0, 1);
} 
</script>

<script src='js/regl.js'></script>
<script src='js/react.production.min.js'></script>
<script src='js/react-dom.production.min.js'></script>
<script src="js/index.js"></script>