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

小編給大家分享一下JavaScript如何實現(xiàn)鼠標移動粒子跟隨效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),定邊企業(yè)網(wǎng)站建設(shè),定邊品牌網(wǎng)站建設(shè),網(wǎng)站定制,定邊網(wǎng)站建設(shè)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,定邊網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

需要用到的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 (){
      // 在當(dāng)前鼠標的位置，生成倆球，然后只要鼠標移動就一直生成小球，每次兩個
      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/ 中去查看具體的解釋。

看完了這篇文章，相信你對“JavaScript如何實現(xiàn)鼠標移動粒子跟隨效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

分享文章：JavaScript如何實現(xiàn)鼠標移動粒子跟隨效果
路徑分享：http://www.chinadenli.net/article18/gjcjdp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設(shè)、用戶體驗、域名注冊、網(wǎng)站導(dǎo)航、品牌網(wǎng)站建設(shè)、云服務(wù)器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

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