html5水墨效果,html5 canvas水墨风格的云雾动画特效

特效描述：html5 canvas水墨风格 云雾动画特效。html5 canvas云雾动画、水墨云雾特效

代码结构

1. 引入JS

2. HTML代码

//

// GLSL textureless classic 3D noise "cnoise",

// with an RSL-style periodic variant "pnoise".

// Author: Stefan Gustavson ([email protected])

// Version: 2011-10-11

//

// Many thanks to Ian McEwan of Ashima Arts for the

// ideas for permutation and gradient selection.

//

// Copyright (c) 2011 Stefan Gustavson. All rights reserved.

// Distributed under the MIT license. See LICENSE file.

// https://github.com/ashima/webgl-noise

//

vec3 mod289(vec3 x)

{

return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec4 mod289(vec4 x)

{

return x - floor(x * (1.0 / 289.0)) * 289.0;

}

vec4 permute(vec4 x)

{

return mod289(((x*34.0)+1.0)*x);

}

vec4 taylorInvSqrt(vec4 r)

{

return 1.79284291400159 - 0.85373472095314 * r;

}

vec3 fade(vec3 t) {

return t*t*t*(t*(t*6.0-15.0)+10.0);

}

// Classic Perlin noise

float cnoise(vec3 P)

{

vec3 Pi0 = floor(P); // Integer part for indexing

vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1

Pi0 = mod289(Pi0);

Pi1 = mod289(Pi1);

vec3 Pf0 = fract(P); // Fractional part for interpolation

vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0

vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);

vec4 iy = vec4(Pi0.yy, Pi1.yy);

vec4 iz0 = Pi0.zzzz;

vec4 iz1 = Pi1.zzzz;

vec4 ixy = permute(permute(ix) + iy);

vec4 ixy0 = permute(ixy + iz0);

vec4 ixy1 = permute(ixy + iz1);

vec4 gx0 = ixy0 * (1.0 / 7.0);

vec4 gy0 = fract(floor(gx0) * (1.0 / 7.0)) - 0.5;

gx0 = fract(gx0);

vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);

vec4 sz0 = step(gz0, vec4(0.0));

gx0 -= sz0 * (step(0.0, gx0) - 0.5);

gy0 -= sz0 * (step(0.0, gy0) - 0.5);

vec4 gx1 = ixy1 * (1.0 / 7.0);

vec4 gy1 = fract(floor(gx1) * (1.0 / 7.0)) - 0.5;

gx1 = fract(gx1);

vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);

vec4 sz1 = step(gz1, vec4(0.0));

gx1 -= sz1 * (step(0.0, gx1) - 0.5);

gy1 -= sz1 * (step(