快捷導(dǎo)航

原生js canvas實(shí)現(xiàn)鼠標(biāo)跟隨效果

更新時(shí)間：2020年08月02日 10:55:12 作者：Mr.王征

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

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

效果展示：

源碼展示：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>canvas鼠標(biāo)跟隨效果（原生js實(shí)現(xiàn)）</title>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    * {
      margin:0;
      padding:0;
    }
    body {
      overflow:hidden;
    }
    #myCanvas {
      background-color:#000;
    }
  </style>
</head>
<body>
<canvas id="myCanvas"></canvas>
 
<script>
  var myCanvas = document.getElementById('myCanvas');
  var ctx = myCanvas.getContext("2d");
  var starlist = [];
 
  function init() {
    // 設(shè)置canvas區(qū)域的范圍為整個(gè)頁(yè)面
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
  };
  init();
  // 監(jiān)聽(tīng)屏幕大小改變 重新為canvas大小賦值
  window.onresize = init;
 
  // 當(dāng)鼠標(biāo)移動(dòng)時(shí) 將鼠標(biāo)坐標(biāo)傳入構(gòu)造函數(shù) 同時(shí)創(chuàng)建一個(gè)對(duì)象
  myCanvas.addEventListener('mousemove', function(e) {
    // 將對(duì)象push到數(shù)組中，畫(huà)出來(lái)的彩色小點(diǎn)可以看作每一個(gè)對(duì)象中記錄著信息 然后存在數(shù)組中
    starlist.push(new Star(e.offsetX, e.offsetY));
  });
 
  // 隨機(jī)數(shù)函數(shù)
  function random(min, max) {
    // 設(shè)置生成隨機(jī)數(shù)公式
    return Math.floor((max - min) * Math.random() + min);
  };
 
 
  // 構(gòu)造函數(shù)
  function Star(x, y) {
    // 將坐標(biāo)存在每一個(gè)點(diǎn)的對(duì)象中
    this.x = x;
    this.y = y;
    // 設(shè)置隨機(jī)偏移量
    this.vx = (Math.random() - 0.5) * 3;
    this.vy = (Math.random() - 0.5) * 3;
    this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
    // 初始透明度
    this.a = 1;
    // 開(kāi)始畫(huà)
    this.draw();
  }
 
  // 再star對(duì)象原型上封裝方法
  Star.prototype = {
    // canvas根據(jù)數(shù)組中存在的每一個(gè)對(duì)象的小點(diǎn)信息開(kāi)始畫(huà)
    draw: function() {
      ctx.beginPath();
      ctx.fillStyle = this.color;
      // 圖像覆蓋 顯示方式 lighter 會(huì)將覆蓋部分的顏色重疊顯示出來(lái)
      ctx.globalCompositeOperation = 'lighter'
      ctx.globalAlpha = this.a;
      ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
      ctx.fill();
      this.updata();
    },
    updata: function() {
      // 根據(jù)偏移量更新每一個(gè)小點(diǎn)的位置
      this.x += this.vx;
      this.y += this.vy;
      // 透明度越來(lái)越小
      this.a *= 0.98;
    }
  }
  // 渲染
  function render() {
    // 每一次根據(jù)改變后數(shù)組中的元素進(jìn)行畫(huà)圓圈 把原來(lái)的內(nèi)容區(qū)域清除掉
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)
 
    // 根據(jù)存在數(shù)組中的每一位對(duì)象中的信息畫(huà)圓
    starlist.forEach(function(ele, i) {
      ele.draw();
      // 如果數(shù)組中存在透明度小的對(duì)象 ，給他去掉 效果展示逐漸消失
      if (ele.a < 0.05) {
        starlist.splice(i, 1);
      }
    });
    requestAnimationFrame(render);
  }
  render();
</script>
<pre style="color:red">
 感： 最近貢獻(xiàn)一下我在教學(xué)中的小案例可以能給你一些幫助 ,希望繼續(xù)關(guān)注我的博客
                                        --王
</pre> 
 
</body>
</html>

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

您可能感興趣的文章: