溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關ES6與canvas如何實現鼠標小球跟隨效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
首先，html部分，目前就一個canvas標簽。
<canvas id="canvas"> 當前瀏覽器不支持！ </canvas>
其次，css部分，沒有考慮美觀，大家喜歡的話，可以自己添加樣式
<style>
body{
margin: 90px;
}
#canvas{
box-shadow: 0 0 5px;
}
</style>最后，看下js實現部分
<script>
const canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 1000;
canvas.style.backgroundColor = "#000";
const ctx = canvas.getContext("2d");
//小球類
class Ball{
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
//小球半徑默認40
this.r = 40;
}
//繪制小球
render(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
//移動小球
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color);
this.dX = Math.floor(Math.random()*5+1);
this.dY = Math.floor(Math.random()*5+1);
this.dR = Math.floor(Math.random()*5+1);
}
upData(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
let ballArry = [];
let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
canvas.addEventListener("mousemove",function(e){
ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
})
setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let i=0;i<ballArry.length;i++){
ballArry[i].render();
ballArry[i].upData();
}
},50);
</script>稍作解釋下我的設計思路：
首先，獲取canvas對象，獲取上下文，設置一些基本的屬性。（canvas不做過多描述，具體的可以去w3自己研究）。然后，先定義一個Ball的類，里面有小球的圓心坐標位置，以及半徑和顏色。在定義一個畫小球的方法，具體的畫圓實現，不懂的可以去canvas文檔自己去看。
在定義一個會變的小球類并繼承Ball類。里面會有更新小球狀態的方法，用來改變小球的半徑以及顏色屬相。
最后，開啟一個定時器，當鼠標移動時，把生成的小球存儲到數組中，然后遍歷循環讀取小球，并改變小球的樣式，達到最終的效果。
最后附上完整代碼。直接拷貝瀏覽器運行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>會動的小球</title>
<style>
body{
margin: 90px;
}
#canvas{
box-shadow: 0 0 5px;
}
</style>
</head>
<body>
<canvas id="canvas">
當前瀏覽器不支持！
</canvas>
<script>
const canvas = document.getElementById("canvas");
canvas.height = 600;
canvas.width = 1000;
canvas.style.backgroundColor = "#000";
const ctx = canvas.getContext("2d");
//小球類
class Ball{
constructor(x, y, color){
this.x = x;
this.y = y;
this.color = color;
//小球半徑默認40
this.r = 40;
}
//繪制小球
render(){
ctx.save();
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.restore();
}
}
//移動小球
class MoveBall extends Ball{
constructor(x, y, color){
super(x, y, color);
this.dX = Math.floor(Math.random()*5+1);
this.dY = Math.floor(Math.random()*5+1);
this.dR = Math.floor(Math.random()*5+1);
}
upData(){
this.x += this.dX;
this.y += this.dY;
this.r -= this.dR;
if(this.r < 0){
this.r = 0;
}
}
}
let ballArry = [];
let colorArry = ['red', 'green', 'pink', 'yellow', 'blue'];
canvas.addEventListener("mousemove",function(e){
ballArry.push(new MoveBall(e.offsetX, e.offsetY, colorArry[Math.floor(Math.random()*5)]));
})
setInterval(function(){
ctx.clearRect(0, 0, canvas.width, canvas.height);
for(let i=0;i<ballArry.length;i++){
ballArry[i].render();
ballArry[i].upData();
}
},50);
</script>
</body>
</html>關于“ES6與canvas如何實現鼠標小球跟隨效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
