手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

canvas粒子效果

2018-7-27    seo達人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里

<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    .container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas id="cs"></canvas>
  </div>
</body>
<script>
  function MoveBalls(element, opts) {
    var canvas = document.querySelector(element);
    this.canvas = canvas;
    this.ctx = canvas.getContext("2d");
    var defaultOpts = {
      total: 100,
      color: "#00D0FF",
      size: 1,
      width: this.canvas.parentNode.clientWidth,
      height: this.canvas.parentNode.clientHeight
    };
    var opts = opts || defaultOpts;
    for (var key in opts) {
        defaultOpts[key] = opts[key];
    };
    for (var key in defaultOpts) {
        this[key] = defaultOpts[key];
    };
    opts = null;
    defaultOpts = null;
    // 鼠標坐標
    this.coordinate = {
      x: null,
      y: null,
      max: 100
    };
    // 粒子
    this.dots = [];
    // 含鼠標坐標的粒子數(shù)組
    this.newDots = [];
    // 總數(shù)
    this.count = 0;
    // requestAnimationFrame兼容處理
    window.requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
          window.setTimeout(callback, 1000 / 60);
        };
    this.colorReg = /[rgba()]/g;
    this.init();
  };
  MoveBalls.prototype = {
    constructor: MoveBalls,
    init: function () {
      var _this = this;
      this.freshResize();
      this.mouseEvent();
      this.getDots();
      var timer = setTimeout(function () {
        clearTimeout(timer);
        _this.draw(_this)
      }, 300);
    },
    colorCheck: function () {
      this.canvas.style.color = this.color;
      var colorData = this.canvas.style.color;
      return colorData = colorData.replace(this.colorReg, "").split(",");
    },
    resize: function (self) {
      var _this = self || this;
      _this.canvas.width = _this.width;
      _this.canvas.height = _this.height;
    },
    freshResize: function () {
      this.resize();
      var _this = this;
      window.addEventListener("resize", function () {
        _this.resize(_this);
      });
    },
    mouseEvent: function () {
      var _this = this;
      _this.canvas.addEventListener("mousemove", function (e) {
        var e = e || winodw.event;
        _this.coordinate.x = e.offsetX ? e.offsetX : e.layerX;
        _this.coordinate.y = e.offsetY ? e.offsetY : e.layerY;
      });
      _this.canvas.addEventListener("mouseout", function () {
        _this.coordinate.x = null;
        _this.coordinate.y = null;
      })
    },
    getDots: function () {
      while(this.count < this.total) {
        var x = Math.random() * this.canvas.width;
        var y = Math.random() * this.canvas.height;
        var xMove = Math.random() * 2 - 1;
        var yMove = Math.random() * 2 - 1;
        this.dots.push({
          x: x,
          y: y,
          xMove: xMove,
          yMove: yMove,
          max: 100
        });
        this.count ++;
      }
    },
    draw: function (self) {
      var _this = self || this;
      var ctx = _this.ctx;
      ctx.clearRect(0, 0, _this.canvas.width, _this.canvas.height);
      _this.newDots = [_this.coordinate].concat(_this.dots);
      _this.dots.forEach(function (dot) {
        dot.xMove *= (dot.x > _this.canvas.width || dot.x < 0) ? -1 : 1;
        dot.yMove *= (dot.y > _this.canvas.height || dot.y < 0) ? -1 : 1;
        dot.x += dot.xMove;
        dot.y += dot.yMove;
        // 繪制點
        ctx.save();
        ctx.beginPath();
        ctx.arc(dot.x, dot.y, _this.size, 0, Math.PI * 5);
        ctx.fillStyle = _this.color;
        ctx.fill();
        ctx.restore();
        // 循環(huán)比對粒子間的距離
        for (var i = 0; i < _this.newDots.length; i ++) {
          var newDot = _this.newDots[i];
          // 如果是第一個點,則跳過
          if(newDot === dot || newDot.x === null || newDot.y === null) continue;
          var xDistance = dot.x - newDot.x;
          var yDistance = dot.y - newDot.y;
          var distance = Math.sqrt(Math.pow(xDistance, 2) + Math.pow(yDistance, 2));
          // 顏色深度
          var deep = 0;
          // 小于最小距離,則連線
          if (distance <= newDot.max) {
            // 附近的小球向鼠標位置移動
            if(newDot === _this.coordinate && distance > (newDot.max / 2)) {
              dot.x -= xDistance * 0.05;
              dot.y -= yDistance * 0.05;
            }
            // 距離越近---值越大---顏色越深
            deep = (newDot.max - distance) / newDot.max;
            // 畫線
            ctx.save();
            ctx.beginPath();
            ctx.lineWidth = deep / 2;
            var colorInfo = _this.colorCheck();
            ctx.strokeStyle = "rgba(" + colorInfo[0] + ", " + colorInfo[1] + ", " + colorInfo[2] + "," + (deep + 0.4) + ")";
            ctx.moveTo(dot.x, dot.y);
            ctx.lineTo(newDot.x, newDot.y);
            ctx.stroke();
            ctx.restore();
          }
        }
        // 將已經(jīng)計算過的粒子刪除,減少遍歷的總數(shù)量
        _this.newDots.splice(_this.newDots.indexOf(dot), 1);
      });
      window.requestAnimationFrame(function (obj) {
        _this.draw(_this);
      });
    }
  }
  var moveBalls = new MoveBalls("#cs", {total: 66, color: "#00D0FF", size: 1});
</script>
</html>

藍藍設計www.88yangsc.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


分享本文至:

日歷

鏈接

個人資料

藍藍設計的小編 http://www.88yangsc.com

存檔