JavaScript實現環繞滑鼠旋轉效果

本文例項為大家分享了實現環繞滑鼠旋轉效果的具體程式碼，供大家參考，具體內容如下

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Canvas Resize</title>
  <style type="text/">
    /* 清除預設邊距 */
    *{
      margin: 0;
      padding:0
    }
    html,body{
      /* 設定瀏覽器寬高為100% */
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <!-- canvas可以書寫內容 但是隻會在瀏覽器不顯示canvas時才會顯示書寫的內容 -->
  <canvas></canvas>
  <script src="/script.js"></script>
</body>

</html>

js：

//以前封裝的函式 直接從工具庫中複製過來的
/**
* 獲取隨機數的函式 獲取到的隨機數取整
*/
function getRandom(a,b){
  return Math.floor(Math.random() * Math.abs(a - b)) + Math.min(a,b)
}
/**
* 獲取16進位制的隨機顏色值
*/
function getColor(){
  var color = '#'
  for(var i=0;i<3;i++){
    var hex = getRandom(0,256).toString(16)
    color += hex.length ===nUQoDB 
 1 ? '0' + hex : hex;
  }
  return color
}
//獲取隨機數 但是不取整
function randomDoubleFromRange(a,b) {
  return Math.random() * (Math.abs(a - b)) + Math.min(a,b);
}

//設定滑鼠的位置 先設定為window的中心
var mouse = {
  x: window.innerWidth / 2,y: window.innerHeight / 2
}

//建立滑鼠移動的事件監聽事件 監聽滑鼠所在window中的實時位置
window.addEventListener('mousemove',function (window) {
  //給陣列中的x和y修改值
  mouse.x = window.clientX;
  mouse.y = window.clientY;
});

//當視窗大小發生改變時 重新獲取畫布寬高並且重置程式碼 resize事件在視窗大小變化時觸發
window.addEventListener('resize',function () {
  //window的可用視窗大小 包含了滾動條的區域大小
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});

//獲取頁面上的canvas
var canvas = document.querySelector('canvas');

//設定canvas的大小為window大小 如果不設定 就使用預設寬高300*150
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

//設定canvas繪畫的環境 語法Canvas.getContext(contextID) 現在版本只能寫引數2d 以後可能會支援3d
var ctx = canvas.getContext('2d');

//封裝一個製造環繞滑鼠的小球的函式 引數是小球圓心在x軸www.cppcns.com 
的位置 在y軸的位置 小球半徑 小球填充顏色
function Particle(x,y,radius,color) {
  //小球中心點的x軸位置
  this.x = x;
  //小球中心點的y軸位置
  this.y = y;
  //小球半徑
  this.radius = radius;
  //小球顏色
  this.color = color;
  //小球轉動的弧度值 不取整 如果取整 就少了很多數字 很多小球都會重疊
  this.theta = randomDoubleFromRange(0,2 * Math.PI);
  //小球繞中心點轉動的速度
  this.speed = 0.05;
  //小球距離中心點的距離
  this.distance = getRandom(70,90);
  //小球跟隨滑鼠移動的速度
  this.dragSpeed = 0.05;
  //記錄滑鼠移動前滑鼠的位置
  this.lastMouse = {
    x: x,y: y
  };
  //繪製函式
  this.draw = function (lastPosition) {
    //重置當前路徑 因為建立的每一個路徑都會以上一個beginPath之後的所有路徑作為基礎繪製 會把之前所有線條的顏色全部繪製成和最後一個線條相同的一個顏色
    ctx.beginPath();
    //將小球顏色作為填充顏色
    ctx.strokeStyle = this.color;
    //將小球半徑作為路徑寬度
    ctx.lineWidth = this.radius;
    //路徑起始位置
    ctx.moveTo(lastPosition.x,lastPosition.y);
    //路徑結束位置
   www.cppcns.com ctx.lineTo(this.x,this.y);
    //繪製確切路徑
    ctx.stroke();
    //關閉路徑 不是結束路徑 而是從結束點建立一條線連線到起始點 使路徑閉合
    ctx.closePath();
  }

  //更新資料的函式
  this.update = function () {
    //建立lastPosition物件接收上一次滑鼠的x和y的值
    var lastPosition = {
      x: this.x,y: this.y
    }

    //每次呼叫函式移動滑鼠當前位置和上一次位置之間的dragSpeed = 0.05的距離 產生拖拽感覺
    this.lastMouse.x += (mouse.x - this.lastMouse.x) * this.dragSpeed;
    this.lastMouse.y += (mouse.y - this.lastMouse.y) * this.dragSpeed;

    //更新小球當前位置 因為每一次呼叫小球的旋轉角度不同導致其位置不同
    this.x = this.lastMouse.x + Math.cos(this.theta) * this.distance;
    this.y = this.lastMouse.y + Math.sin(this.theta) * this.distance;

    //更新小球的角度值
    this.theta += this.speed;
    //將引數傳遞給繪製函式繪製路徑
    this.draw(lastPosition);
  }
}

//定義particles變數
var particles;

//初始化函式
function init() {
  // 每次呼叫這個函式都要先把陣列內容清空 因為使用這個函式除了開啟後第一次代表呼叫之外 別的呼叫都表示視窗大小發生了改變 引數發生了變化 為了修改視窗大小之後又因為呼叫該函式導致小球重複建立 所以要呼叫後先清空再建立
  particles = [];
  // 繪製50個小球
  for (var i = 0; i < 50; i++) {
    //獲取隨機的顏色
    let color = getColor()
    //將建構函式創造的小球新增到陣列中
    particles.push(new Particle(canvas.width / 2,canvas.height / 2,3,color));
  }
}

function animate() {
  //定時的呼叫這個函式 類似於setInterval 但是setInterval時間間隔不是很準確 requestAnimationFrame固定為以每秒60次的頻率呼叫一次括號內的函式
  requestAnimationFrame(animate);

  // 每一幀都給之前的幀蒙上一層白色透明的矩形 用以清除上一幀繪製的路徑
  //填充矩形顏色 矩形背景顏色 透明度設定為0.1 可以使之前幾幀的路徑因為多次覆蓋慢慢邊淡 只是會在背景上留下很淡的痕跡 如果直接使用rgb白色覆蓋 雖然沒有痕跡殘留 但是之前路徑直接被白色覆蓋 沒有拖尾效果
  // ctx.fillStyle = 'rgb(255,255,255)';
  ctx.fillStyle = 'rgba(255,0.1)';
  //繪製矩形 給window繪製一個等高等寬的矩形 以此製造一個漸變的效果
  ctx.fillRect(0,canvas.width,canvas.height);

  //對鍵名遍歷陣列 獲取canhttp://www.cppcns.comvas.width / 2,color引數 每遍歷一次就呼叫一次update函式 將獲取到的引數作為實參傳遞給update函式
  for (var p of particles) {
    p.update();
  }
}

//初始化 建立小球
init();
//開始動畫
animate();

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

JavaScript實現環繞滑鼠旋轉效果

JavaScript實現環繞滑鼠旋轉效果

JavaScript實現拖拽盒子效果

JavaScript實現飛舞的泡泡效果

JavaScript實現簡單貪吃蛇效果

JavaScript實現公告欄上下滾動效果

JavaScript實現tab欄切換效果

JavaScript實現簡單進度條效果

JavaScript實現捕獲滑鼠座標

javascript實現文字跑馬燈效果

javascript實現前端分頁效果

JavaScript實現煙花綻放動畫效果

純css實現盒子3d旋轉效果

JavaScript實現多球運動效果

JavaScript實現刮刮樂效果

css實現方塊立體旋轉效果

JavaScript實現alert彈框效果

JavaScript實現無限輪播效果

JavaScript實現網頁tab欄效果製作

javascript實現電商放大鏡效果

JavaScript實現彈出視窗效果

JavaScript實現環繞滑鼠旋轉效果

相關推薦