canvas绘图圈

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

var canvas = document.createElement("canvas"),
  c = canvas.getContext("2d");
var w = canvas.width = window.innerWidth,
  h = canvas.height = window.innerHeight;

document.body.appendChild(canvas);

//You can play with these variables for diferent results.

var vq = -3,
  step = 0.01,
  circleSizeDecrease = 3 / 4,
  numOfCircles = 5,
  tailLength = 1000;

var pos = [],
  vel = [],
  cNum = numOfCircles,
  speed = [],
  hist = [];

for (i = 0; i < cNum + 1; i++) {

pos[i] = {
    x: w / 2,
    y: h / 2,
    r: 50,
  };

vel[i] = step;
  speed[i] = 0;

console.log(pos);
}

function draw() {
  for (i = 0; i < cNum; i++) {
    vel[i + 1] = vq * vel[i];
    speed[i] += vel[i];
    pos[i + 1] = {
      x: (pos[i].r + pos[i + 1].r) * Math.cos(speed[i]) + pos[i].x,
      y: (pos[i].r + pos[i + 1].r) * Math.sin(speed[i]) + pos[i].y,
      r: circleSizeDecrease * pos[i].r
    };
    c.beginPath();
    c.arc(pos[i].x, pos[i].y, pos[i].r, 0, 2 * Math.PI);
    c.fillStyle = "hsla(10,0%,100%," + 0.5 / (i + 1) + ")";
    c.fill();

}
  hist.push(pos[cNum - 1]);
  if (hist.length > tailLength) {
    hist.splice(hist.length - tailLength, 1);
  }
  console.log(hist);
  for (j = 1; j < hist.length; j++) {
    c.beginPath();
    c.lineTo(hist[j].x, hist[j].y, 1, 0, 2 * Math.PI);
    c.lineTo(hist[j + 1].x, hist[j + 1].y, 1, 0, 2 * Math.PI);
    c.strokeStyle = "hsla(10,0%,100%," + 1 + ")";
    c.stroke();
  }
}

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();

function loop() {

setTimeout(function() {
    window.requestAnimFrame(loop);
    c.fillStyle = "rgba(30,30,30,1)";
    c.fillRect(0, 0, w, h);
    draw();
  }, 1000 / 60);

}

window.addEventListener('resize', function() {
  w = canvas.width = window.innerWidth,
    h = canvas.height = window.innerHeight;
  c.fillStyle = "rgba(30,30,30,1)";
  c.fillRect(0, 0, w, h);
});

loop();

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