溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關JavaScript如何實現環繞鼠標旋轉效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發，可以給網站添加各種各樣的動態效果，讓網頁更加美觀。
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/css">
/* 清除默認邊距 */
*{
margin: 0;
padding:0
}
html,body{
/* 設置瀏覽器寬高為100% */
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- canvas可以書寫內容 但是只會在瀏覽器不顯示canvas時才會顯示書寫的內容 -->
<canvas></canvas>
<script src="js/javascript.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 === 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軸的位置 在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);
//路徑結束位置
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, 255, 255, 0.1)';
//繪制矩形 給window繪制一個等高等寬的矩形 以此制造一個漸變的效果
ctx.fillRect(0, 0, canvas.width, canvas.height);
//對鍵名遍歷數組 獲取canvas.width / 2, canvas.height / 2, 3, color參數 每遍歷一次就調用一次update函數 將獲取到的參數作為實參傳遞給update函數
for (var p of particles) {
p.update();
}
}
//初始化 創建小球
init();
//開始動畫
animate();看完上述內容，你們對JavaScript如何實現環繞鼠標旋轉效果有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
