溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript如何實現鼠標移動粒子跟隨效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
※ 如上圖是最終顯示效果，跟隨鼠標的移動，生成的粒子跟隨。
需要用到的js庫：Underscore。Underscore是一個JavaScript實用庫，提供了一整套函數式編程的實用功能，但是沒有擴展任何JavaScript內置對象。它是這個問題的答案：“如果我在一個空白的HTML頁面前坐下，并希望立即開始工作，我需要什么？”...它彌補了部分jQuery沒有實現的功能，同時又是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");
// 聲明一個空數組，用來放后面生成的小球
var ballsArr = [];
// 創建一個小球類
function Balls (x, y){
// 坐標x為傳進來的x
this.x = x;
// 坐標y為傳進來的y
this.y = y;
// 生成的小球半徑為5到10中的任一整數（參數隨便）
this.r = _.random(5, 10);
// 生成的小球的顏色為這七種顏色中的隨機一種（參數隨便）
this.c = _.sample(["red", "orange", "yellow", "green", "cyan", "blue", "white"]);
// 小球坐標x的增量為-4到4之間的整數（參數隨便）
this.dx = _.random(-4, 4);
// 小球坐標y的增量為-4到4之間的整數（參數隨便）
this.dy = _.random(-4, 4);
// 把生成的小球存入數組ballsArr
ballsArr.push(this);
}
// 給所有Balls綁定一個方法update，目的是為了每次都能按照隨機方向移動
Balls.prototype.update = function (){
// 每次x坐標加上增量dx
this.x += this.dx;
// 每次y坐標加上增量dy
this.y += this.dy;
// 每次半徑縮小0.5（參數隨便）
this.r -= 0.5;
// 半徑小于等于0的話，就從小球數組中移出
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);
// 顏色為數組中隨機的一個
ctx.fillStyle = this.c;
// 畫上畫布
ctx.fill();
// 終止繪制
ctx.closePath();
}
// onmousemove事件監聽
cvs.onmousemove = function (){
// 在當前鼠標的位置，生成倆球，然后只要鼠標移動就一直生成小球，每次兩個
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如何實現鼠標移動粒子跟隨效果”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
