canvas实现小球气泡漂浮三维动画效果代码
代码语言:html
所属分类:动画
代码描述:canvas实现小球气泡漂浮三维动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> </head> <body> <canvas id='canv'></canvas> <script > var c = document.getElementById('canv'); var $ = c.getContext('2d'); var u = 0; /* Marsaglia's Xorshift128 PRG: http://en.wikipedia.org/wiki/Xorshift */ var shift = function(x, y, z, w) { x = x || 123456789; y = y || 362436069; z = z || 521288629; w = w || 88675123; return function() { var s = x ^ (x << 11); x = y; y = z; z = w; w = (w ^ (w >>> 19)) ^ (s ^ (s >>> 8)); return w; }; } var go = function() { var sc, g, g1, i, j, p, x, y, z, w, a, cur, d = new Date() / 1000, rnd = shift(), rnd1 = d, rnd2 = 2.4, rnd3 = d * 0.2, rnd1c = Math.cos(rnd1), rnd1s = Math.sin(rnd1), rnd2c = Math.cos(rnd2), rnd2s = Math.sin(rnd2); c.width = window.innerWidth; c.height = window.innerHeight; sc = Math.max(c.width, c.height); $.translate(c.width * 0.5, c.height * 0.5); $.scale(sc, sc); g = $.createLinearGradient(-1, -2, 1, 2); g.addColorStop(0.0, 'hsla(' + u * 5 + ',90%,50%, 1)'); g.addColorStop(0.5, 'hsla(0,0%,0%,1)'); g.addColorStop(1.0, 'hsla(' + u + ',90%,50%, 1)'); $.fillStyle = g; $.fillRect(-0.5, -0.5, 1, 1); $.rotate(rnd3 % Math.PI * 2); for (i = 0; i < 360; i += 1) { p = rnd(); x = (p & 0xff) / 128 - 1; y = (p >>> 8 & 0xff) / 128 - 1; z = (p >>> 16 & 0xff) / 128 - 1.........完整代码请登录后点击上方下载按钮下载查看
网友评论0