火球鼠标跟随

下载代码

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);

c.fillStyle = "rgba(30,30,30,1)";
c.fillRect(0, 0, w, h);

var hi = [],
  count = 6,
  d = 10;

class rope {
  constructor(n, r) {
    this.n = n;
    this.r = r;
    this.d = 40;
    this.choice = [Math.floor(Math.random() * 50) ,Math.floor(Math.random() * 20+170)];
    this.col =
      "hsla(" +this.choice[Math.floor(Math.random()*1.1)]+
      ",100%," +
      Math.floor(Math.random() * 25 + 50) +
      "%," +
      Math.random() +
      ")";
    this.tail = new Array(this.n);
    for (var i = 0; i < this.n; i++) {
      this.tail[i] = { x: Math.random()*w, y: Math.random()*h };
    }
  }
  move(mx, my) {
    for (var i = 0; i < this.n; i++) {
      if (i > 0) {
        this.tail[i].tx = this.tail[i - 1].x;
        this.tail[i].ty = this.tail[i - 1].y;
      } else {
        this.tail[i].tx = mx;
        this.tail[i].ty = my;
      }
      this.tail[i].dx = this.tail[i].tx - this.tail[i].x;
      this.tail[i].dy = this.tail[i].ty - this.tail[i].y;
      
      this.tail[i].phi = Math.atan2(this.tail[i].dy, this.tail[i].dx);
      this.tail[i].l = Math.sqrt(
        Math.pow(this.tail[i].dx, 2) + Math.pow(this.tail[i].dy, 2)
      );
      this.tail[i].dx = this.tail[i].dx / this.tail[i].l * -this.r;
      this.tail[i].dy = this.tail[i].dy / this.tail[i].l * -this.r;
      this.tail[i].x = this.tail[i].tx + this.tail[i].dx;
      this.tail[i].y = this.tail[i].ty + this.tail[i].dy;
      this.tail[i].dx = this.r * Math.cos(this.tail[i].phi);
      this.tail[i].dy = this.r * Math.sin(this.tail[i].phi);
    }
  }
  show() {
    c.beginPath();
    for (var i = 0; i < this.n; i++) {
      // c.beginPath();
      c.lineTo(
        this.tail[i].x + this.tail[i].dx,
        this.tail[i].y + this.tail[i].dy
      );
    }
    c.lineTo(this.tail[this.n - 1].x, this.tail[this.n - 1].y);
    c.strokeStyle = this.col;
    c.lineWidth = this.d;
    c.lineCap="round";
    c.lineJoin="round";
    c.stroke();
  }
}
var le;
for (var j = 0; j < count; j++) {
  le = Math.floor((Math.random()*500+500)/d);
  hi[j] = new rope(le, d);
}
var q = Math.random() * 5,
  x = w / 2,
  y = h / 2,
  x2 = w / 2,
  y2 = h / 2,
  ex = 0,
  ey = 0,
  t = 0,
  r1 = 10,
  dist = 0;
function draw() {
  t += 0.1;
  q = 20;
  x2 =
    w / 2 +
    (h / 2 - q) * Math.sqrt(2) * Math.cos(t) / (Math.pow(Math.sin(t), 2) + 1);
  y2 =
    h / 2 +
    (h / 2 - q) *
      Math.sqrt(2) *
      Math.cos(t) *
      Math.sin(t) /
      (Math.pow(Math.sin(t), 2) + 1);
  if (mouse.x) {
    // q = mouse.v;
    tx = mouse.x;
    ty = mouse.y;
  } else {
    tx = x2;
    ty = y2;
  }

dist = Math.sqrt(ex * ex + ey * ey);
  ex = tx - x;
  ey = ty - y;
  x += ex / (w / dist);
  y += ey / (w / dist);
  c.globalCompositeOperation = "color-dodge";
  for (var j = 0; j < count; j++) {
    hi[j].move(
      x + q * Math.cos((2 * j * Math.PI / count)),
      y + q * Math.sin((2 * j * Math.PI / count))
    );
    hi[j].show();
  }
  // c.globalCompositeOperation = "difference";
  // c.beginPath();
  // c.arc(x, y, Math.abs(q), 0, 2 * Math.PI);
  // c.fillStyle = "hsla(50,70%,20%,1)";
  // c.closePath();
  // c.fill();
  c.globalCompositeOperation = "source-over";
}

var mouse = {
  x: false,
  y: false,
  vx: 0,
  vy: 0,
  v: 0,
  cache: [],
  s: 0
};
var last_mouse = {
  x: false,
  y: false,
  vx: 0,
  vy: 0,
  v: 0,
  cache: [],
  s: 0
};

canvas.addEventListener(
  "mousemove",
  function(e) {
    last_mouse.x = mouse.x;
    last_mouse.y = mouse.y;

mouse.x = e.pageX - this.offsetLeft;
    mouse.y = e.pageY - this.offsetTop;

mouse.vx = last_mouse.x - mouse.x;
    mouse.vy = last_mouse.y - mouse.y;
    mouse.v = Math.sqrt(Math.pow(mouse.vx, 2) + Math.pow(mouse.vy, 2));
    mouse.cache.push(mouse.v);
    if (mouse.cache.length > 10) {
      mouse.cache.splice(0, 1);
    }
    mouse.s = 0;
    for (var i = 0; i < mouse.cache.length; i++) {
      mouse.s += mouse.cache[i];
    }
    mouse.v = mouse.s / mouse.cache.length;
  },
  false
);

canvas.addEventListener("mouseleave", function(e) {
  mouse.x = false;
  mouse.y = false;
});

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);
  draw();
});

loop();

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