canvas实现可跟鼠标移动的动画粒子效果

canvas实现可跟鼠标移动的动画粒子效果

<canvas id='canv'></canvas>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>

 

@import url(http://fonts.googleapis.com/css?family=Righteous);
body {
  width: 100%;
  margin: 0;
  overflow: hidden;
  cursor: move;
  background: hsla(0, 0%, 10%, 1);
}

 

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();
c = document.getElementById('canv'),
  $ = c.getContext('2d');

var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;

var rnd = function(min, max) {
  return Math.random() * (max - min) + min;
}

var arr = [];
var num = rnd(50, 150)
var s = 1;
var ms = {
  x: 0,
  y: 0
};
var vel = 2;
var rng = rnd(30, 50);
_x = w / 2;
_y = h / 2;
var u = 0;

var set = function() {
  for (var i = 0; i < num; i++) {
    circs();
  }
  run();
}

var run = function() {
  window.requestAnimationFrame(run);
  upd();
}

var circs = function() {
  arr.push({
    x: _x,
    y: _y,
    v: {
      x: (Math.random() * vel) * 4 - vel,
      y: (Math.random() * vel) * 4 - vel
    }
  });
}

var upd = function() {
  clear();

  for (var i in arr) {

    arr[i].x += arr[i].v.x;
    arr[i].y += arr[i].v.y;

    if (arr[i].x > w + rng || arr[i].x - 5 < 0 - rng) {
      arr.splice(i, 1);
      circs();
    }

    if (arr[i].y > h + rng || arr[i].y < 0 - rng) {
      arr.splice(i, 1);
      circs();
    }

    var dx = arr[i].x - w / 2;
    var dy = arr[i].y - h / 2;
    sqr = Math.sqrt(dx * dx + dy * dy);
    sc = Math.max((sqr / 20), 1);

    var dx2 = (_x + (ms.x - _x) / 12);
    var dy2 = (_y + (ms.y - _y) / 12);

    arr[i].x += dx2 - _x;
    arr[i].y += dy2 - _y;

    $.fillStyle = 'hsla(' + i / 105* (u) + ', 95%, 60%, .8)';
    $.beginPath();
    $.arc(arr[i].x, arr[i].y, s * sc, 0, Math.PI * 2, true);
    $.closePath();
    $.fill();

  }

}

var clear = function() {
  $.globalCompositeOperation = 'source-over';
  $.fillStyle = 'hsla(0,0%,10%,1)';
  $.beginPath();
  $.rect(0, 0, w, h);
  $.closePath();
  $.fill();
  var t1 = "GBTAGS".split("").join(String.fromCharCode(0x2004));;
  $.font = 2.5 + "em 'Righteous', cursive";
  $.fillStyle = 'hsla(' + u / 5 * 12 + ', 95%, 60%, .8)';
  $.fillText(t1, ms.x - $.measureText(t1).width / 2, ms.y);
}

window.addEventListener('mousemove', function(e) {
  ms.x = e.pageX - c.offsetLeft;
  ms.y = e.pageY - c.offsetTop;
  u -= .3;

}, false);

window.addEventListener('mousedown', function(e) {
  _x = ms.x;
  _y = ms.y;
  u -= .3;
}, false);

window.addEventListener('touchmove', function(e) {
  ms.x = e.touches[0].pageX - c.offsetLeft;
  ms.y = e.touches[0].pageY - c.offsetTop;
  u -= .3;
  e.preventDefault();
}, false);

window.addEventListener('touchstart', function(e) {
  _x = ms.x;
  _y = ms.y;
  u -= .3;
  e.preventDefault();
}, false);

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

 

 

.