欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  JavaScript
 
  语言:
 
  JaveScriptBabelCoffeeScript
 
  确定
 
  var canvas, ctx, tim, bai;
 
  canvas = document.getElementsByTagName('canvas')[0];
 
  ctx = canvas.getContext('2d');
 
  canvas.width = canvas.height = 400;
 
  aaa();
 
  function aaa() {
 
  var a, b, c, s, p, r, x, y, z, x1, y1, max, p2, han, h, pt, hei;
 
  ctx.globalCompositeOperation = "source-over";
 
  ctx.fillStyle = "rgb(0,0,0)";
 
  ctx.fillRect(0, 0, canvas.width, canvas.height);
 
  ctx.globalCompositeOperation = "lighter";
 
  tim = new Date().getTime() / 10;
 
  ctx.strokeStyle = ctx.fillStyle = "hsla(244,60%,60%,0.3)";
 
  bai = 0.6 + Math.sin(tim / 471) * 0.2;
 
  hei = 0.9 + Math.sin(tim / 100) * 0.3;
 
  pt = [];
 
  for (c = 0; c < 180; c++) {
 
  s = (c + 1) / 180;
 
  han = Math.cos(s * Math.PI / 2);
 
  h = Math.sin(s * Math.PI / 2);
 
  s = 1 - s;
 
  p = [];
 
  max = (100 * han) | 0;
 
  r = 0;
 
  for (a = 0; a < max; a++) {
 
  x = Math.cos(r) * han;
 
  y = Math.sin(r) * han;
 
  z = nami(r, s);
 
  x -= z * s;
 
  p.push([x, y, hei + z * s + h]);
 
  r += Math.PI * 2 / max;
 
  }
 
  pt.push(p);
 
  }
 
  for (c = 0; c < 100; c++) {
 
  s = (c + 1) / 100;
 
  p = [];
 
  max = 100 * s;
 
  r = 0;
 
  for (a = 0; a < max; a++) {
 
  x = Math.cos(r) * s;
 
  y = Math.sin(r) * s;
 
  z = nami(r, s);
 
  x -= z * s;
 
  p.push([x, y, hei + z * s]);
 
  r += Math.PI * 2 / max;
 
  }
 
  pt.push(p);
 
  }
 
  for (c = 0; c < pt.length; c++) {
 
  p = pt[c];
 
  p2 = [];
 
  for (a = 0; a < p.length; a++) {
 
  x = p[a][0];
 
  y = p[a][1];
 
  z = p[a][2];
 
  b = Math.pow(1.5, y / 2);
 
  x1 = x * b * 150 + 200;
 
  y1 = z * b * 200 - hei * 200 + 150;
 
  p2.push([x1, y1]);
 
  }
 
  ctx.beginPath();
 
  for (a = 0; a < p2.length; a++) ctx.lineTo(p2[a][0], p2[a][1]);
 
  ctx.closePath();
 
  ctx.stroke();
 
  }
 
  requestAnimationFrame(aaa);
 
  }
 
  function nami(r, s) {
 
  var a = Math.sin(r * 2 - tim / 13 + s * 13) / 20 +
 
  Math.sin(r * 5 - tim / 17 + s * 13) / 20 +
 
  Math.sin(r * 7 - tim / 19 + s * 13) / 40;
 
  return a * bai;
 
  }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h62464.shtml