JavaScript實現(xiàn)鼠標移動粒子跟隨效果

更新時間：2020年09月13日 14:08:11 作者：太陽玄燁

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)鼠標移動粒子跟隨效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)鼠標移動粒子跟隨效果的具體代碼，供大家參考，具體內(nèi)容如下

※ 如上圖是最終顯示效果，跟隨鼠標的移動，生成的粒子跟隨。

需要用到的js庫：Underscore。Underscore是一個JavaScript實用庫，提供了一整套函數(shù)式編程的實用功能，但是沒有擴展任何JavaScript內(nèi)置對象。它是這個問題的答案：“如果我在一個空白的HTML頁面前坐下，并希望立即開始工作，我需要什么？”...它彌補了部分jQuery沒有實現(xiàn)的功能，同時又是Backbone.js必不可少的部分。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>鼠標粒子demo</title>
 <style>
  canvas { background: #333; }
 </style>
</head>
<body>
 <canvas width="800" height="500">您的瀏覽器不支持此標簽！</canvas>
 <script src="js/underscore.min.js"></script>
 <script>
  // 獲取canvas元素
  var cvs = document.querySelector("canvas");
  // 獲取上下文對象
  var ctx = cvs.getContext("2d");
  // 聲明一個空數(shù)組，用來放后面生成的小球
  var ballsArr = [];
 
  // 創(chuàng)建一個小球類
  function Balls (x, y){
   // 坐標x為傳進來的x
   this.x = x;
   // 坐標y為傳進來的y
   this.y = y;
   // 生成的小球半徑為5到10中的任一整數(shù)（參數(shù)隨便）
   this.r = _.random(5, 10);
   // 生成的小球的顏色為這七種顏色中的隨機一種（參數(shù)隨便）
   this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);
   // 小球坐標x的增量為-4到4之間的整數(shù)（參數(shù)隨便）
   this.dx = _.random(-4, 4);
   // 小球坐標y的增量為-4到4之間的整數(shù)（參數(shù)隨便）
   this.dy = _.random(-4, 4);
   // 把生成的小球存入數(shù)組ballsArr
   ballsArr.push(this);
  }
 
  // 給所有Balls綁定一個方法update，目的是為了每次都能按照隨機方向移動
  Balls.prototype.update = function (){
   // 每次x坐標加上增量dx
   this.x += this.dx;
   // 每次y坐標加上增量dy
   this.y += this.dy;
   // 每次半徑縮小0.5（參數(shù)隨便）
   this.r -= 0.5;
   // 半徑小于等于0的話，就從小球數(shù)組中移出
   if(this.r <= 0){
    _.without(ballsArr, this);
   }
  }
 
  // 給所有Balls綁定一個方法render，目的是畫圓。
  Balls.prototype.render = function (){
   // 半徑小于等于0就沒必要畫了
   if(this.r <= 0){
    return;
   }
   // 開始繪制
   ctx.beginPath();
   // 繪制圓形，（圓心坐標x，圓心坐標y， 起始弧度，終止弧度，[順逆時針]）
   ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
   // 顏色為數(shù)組中隨機的一個
   ctx.fillStyle = this.c;
   // 畫上畫布
   ctx.fill();
   // 終止繪制
   ctx.closePath(); 
  }
 
  // onmousemove事件監(jiān)聽
  cvs.onmousemove = function (){
   // 在當前鼠標的位置，生成倆球，然后只要鼠標移動就一直生成小球，每次兩個
   new Balls(event.offsetX, event.offsetY);
   new Balls(event.offsetX, event.offsetY);
  }
 
  // setInterval 模擬25FPS的幀率
  setInterval(function (){
   // 因為canvas上屏即像素化，所以先清屏
   ctx.clearRect(0, 0, cvs.width, cvs.height);
   // _.each方法是針對每一個前面的元素，都運行后面的方法
   _.each(ballsArr, function (value){
    value.update();
    value.render();
   });
  }, 40);
 
 </script>
</body>
</html>

里面用到的underscore中的幾個方法，可以到 doc/underscore/ 中去查看具體的解釋。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: