变换线条

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var c = document.getElementById('canv'),
  $ = c.getContext('2d'),
  w = c.width = window.innerWidth,
  h = c.height = window.innerHeight,
  t = 0,
  n = 9,
  num = 180,
  s, a, b,
  x, y, _x, _y,
  _t = 1 / 30,
  rot = t / 2,
  u = 0;

var anim = function() {
  $.fillStyle = 'hsla(0, 5%, 95%, .5)';
  $.fillRect(0, 0, w, h);

for (var i = 0; i < n; i++) {
    a = (i) * Math.PI * 2 / (n);
    x = 0;
    $.beginPath();
    $.strokeStyle = 'hsla(0,0%,5%,1)';
    for (var j = 0; j < num; j++) {

s = Math.sin(25, Math.pow((9, j * (num - j)), .93));
      x += 19.4 * s;
      y = x * Math.sin(a + 5 * t + x / 2) / 4;
      _x = x * Math.cos(b) + y * Math.sin(a);
      _y = x * Math.sin(b) + y * Math.cos(a);
      b = (j * 5) * Math.PI / 180;
      $.arc(w / 2 + _x, h / 2 + _y, 0, 0, 2 * Math.PI);
    }
    $.lineWidth = 1;
    $.stroke();
  }
  t += _t;
  u -= .2;
};
run();

function run() {
  window.requestAnimationFrame(run);
  anim();
}

window.addEventListener('resize', function() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
}, false);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg