html 代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title></title>
- <style>
- body {
- width: 100%;
- margin: 0;
- overflow: hidden;
- }
- canvas{
- display:block;
- }
- </style>
- </head>
- <body>
- <canvas id='canv'></canvas>
- <script>
- var c = document.getElementById('canv');// 获取 canvas 的 Id
- var $ = c.getContext('2d');/* 设置绘制方式 */
- var u = 0;
- 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(338, 95%, 25%, 1)');
- g.addColorStop(0.5, 'hsla(260, 95%, 5%, 1)');
- g.addColorStop(1.0, 'hsla(338, 95%, 30%, 1)');
- $.fillStyle = g;// 颜色
- $.fillRect(-0.5, -0.5, 1, 1);
- $.globalCompositeOperation = 'lighter';
- $.rotate(rnd3 % Math.PI * 2);/* 旋转 */
- for (i = 0; i <300; i += 1) {
- p = rnd();
- x = (p & 0xff) / 128 - 1;
- y = (p>>> 8 & 0xff) / 128 - 1;
- z = (p>>> 16 & 0xff) / 128 - 1;
- w = (p>>> 24 & 0xff) / 256;
- z += d * 0.5;
- z = (z + 1) % 2 - 1;
- a = (z + 1) * 0.5;
- if (a <0.9) {
- $.globalAlpha = a / 0.7;
- }else {
- a -= 0.9;
- $.globalAlpha = 1 - a / 0.1;
- }
- cur = x * rnd1c + y * rnd1s;
- y = x * rnd1s - y * rnd1c;
- x = cur;
- cur = y * rnd2c + z * rnd2s;
- z = y * rnd2s - z * rnd2c;
- y = cur;
- z -= 0.65;
- if (z>= 0) {
- continue;
- }
- sc = 0.1 / z;
- x *= sc;
- y *= sc;
- $.save();
- g1 = $.createRadialGradient(1, 1, 2, 1, 1, 1);
- g1.addColorStop(0.0, 'hsla('+i+', 70%, 40%,.8)');
- g1.addColorStop(0.5, 'hsla('+i+', 75%, 50%, 1)');
- g1.addColorStop(1.0, 'hsla('+i+', 80%, 60%, .8)');
- $.fillStyle = g1;
- $.translate(x, y);
- $.scale(sc * 0.017, sc * 0.017);
- $.beginPath();
- $.moveTo(2, 0);
- for (j = 0; j <10; j += 1) {
- $.rotate(Math.PI*2 * 0.1);
- $.lineTo(j % 2 + 1, 0);
- }
- $.arc(10, 10, 1, 0, Math.PI * 2);
- $.rotate(Math.PI * 2 * 0.1);
- $.closePath();
- $.fill();
- $.restore();
- }
- };
- /*
- 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;
- };
- }
- window.addEventListener('resize', function() {
- c.width = window.innerWidth;
- c.height = window.innerHeight;
- }, false);
- window.requestAnimationFrame = window.requestAnimationFrame||
- window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
- window.msRequestAnimationFrame;
- var run = function() {
- window.requestAnimationFrame(run);
- go();
- }
- run();
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/article/37388/8a6f28a87e68096acc775e3a5f35e32c.html