快捷導(dǎo)航

JavaScript實(shí)現(xiàn)鼠標(biāo)移動(dòng)粒子跟隨效果

更新時(shí)間：2020年09月13日 14:08:11 作者：太陽(yáng)玄燁

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

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

※ 如上圖是最終顯示效果，跟隨鼠標(biāo)的移動(dòng)，生成的粒子跟隨。

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: