粒子排斥网格

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

(function(window, document, undefined) {
  var canvas, ctx, rect, mouse = {
      x: 0,
      y: 0
    },
    repulsion = 5000;
  var points = [];

function distance(x1, y1, x2, y2) {
    return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
  }

function mouseMoveHandler(e) {
    rect = canvas.getBoundingClientRect();
    mouse.x = e.clientX - rect.left;
    mouse.y = e.clientY - rect.top;
  }

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < points.length; points[i++].update()) {
      ctx.beginPath();
      ctx.fillStyle = 'lime'
      ctx.moveTo(points[i].x, points[i].y);
      ctx.arc(points[i].x, points[i].y, 2, 0, Math.PI * 2, true);
      ctx.fill();
      ctx.closePath();
    }
  }

function loop() {
    draw();
    window.requestAnimationFrame(loop);
  }

function init() {
    canvas = document.getElementById('canvas');
    canvas.height = 600;
    canvas.width = 600;
    ctx = canvas.getContext('2d');
    createGrid();
    loop();
  }
  window.onmousemove = mouseMoveHandler;
  window.onload = init;
})(this, document);

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