ES6與canvas實(shí)現(xiàn)鼠標(biāo)小球跟隨效果

最近閑來(lái)無(wú)聊,看了下ES6的語(yǔ)法,結(jié)合canvas實(shí)現(xiàn)了動(dòng)畫特效——隨著鼠標(biāo)的移動(dòng),會(huì)有小球跟隨且自動(dòng)消失的動(dòng)畫。
首先,html部分,目前就一個(gè)canvas標(biāo)簽。
<canvas id="canvas"> 當(dāng)前瀏覽器不支持! </canvas>
其次,css部分,沒有考慮美觀,大家喜歡的話,可以自己添加樣式
<style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style>
最后,看下js實(shí)現(xiàn)部分
<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; //小球半徑默認(rèn)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(); } } //移動(dòng)小球 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>
稍作解釋下我的設(shè)計(jì)思路:
首先,獲取canvas對(duì)象,獲取上下文,設(shè)置一些基本的屬性。(canvas不做過(guò)多描述,具體的可以去w3自己研究)。然后,先定義一個(gè)Ball的類,里面有小球的圓心坐標(biāo)位置,以及半徑和顏色。在定義一個(gè)畫小球的方法,具體的畫圓實(shí)現(xiàn),不懂的可以去canvas文檔自己去看。
在定義一個(gè)會(huì)變的小球類并繼承Ball類。里面會(huì)有更新小球狀態(tài)的方法,用來(lái)改變小球的半徑以及顏色屬相。
最后,開啟一個(gè)定時(shí)器,當(dāng)鼠標(biāo)移動(dòng)時(shí),把生成的小球存儲(chǔ)到數(shù)組中,然后遍歷循環(huán)讀取小球,并改變小球的樣式,達(dá)到最終的效果。
最后附上完整代碼。直接拷貝瀏覽器運(yùn)行。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>會(huì)動(dòng)的小球</title> <style> body{ margin: 90px; } #canvas{ box-shadow: 0 0 5px; } </style> </head> <body> <canvas id="canvas"> 當(dāng)前瀏覽器不支持! </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; //小球半徑默認(rèn)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(); } } //移動(dòng)小球 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>
總結(jié)
以上所述是小編給大家介紹的ES6與canvas實(shí)現(xiàn)鼠標(biāo)小球跟隨鼠標(biāo)效果,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
html5 canvas實(shí)現(xiàn)的鼠標(biāo)響應(yīng)式樹葉光標(biāo)跟隨動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)的鼠標(biāo)響應(yīng)式樹葉光標(biāo)跟隨動(dòng)畫特效源碼。畫面上由無(wú)數(shù)粒子組成的樹葉圖形呈現(xiàn)出分散開來(lái)并跟隨鼠標(biāo)移動(dòng)的動(dòng)畫效果,當(dāng)點(diǎn)擊鼠標(biāo)時(shí),分散的樹葉2017-11-10html5 canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的黑洞動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)跟隨鼠標(biāo)移動(dòng)的黑洞動(dòng)畫特效源碼。畫面上黑色星空背景下,代表形體的白色圓點(diǎn)逐步由慢到快的向著鼠標(biāo)光標(biāo)所在處的黑色圓點(diǎn)匯聚并消失,呈現(xiàn)出2017-08-21html5 canvas實(shí)現(xiàn)的點(diǎn)擊跟隨鼠標(biāo)移動(dòng)光線動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)的點(diǎn)擊跟隨鼠標(biāo)移動(dòng)光線動(dòng)畫特效源碼。鼠標(biāo)點(diǎn)擊頁(yè)面上可呈現(xiàn)出帶有圓點(diǎn)連線到光點(diǎn)的運(yùn)動(dòng)狀態(tài)動(dòng)畫效果,且光點(diǎn)的移動(dòng)圍繞著鼠標(biāo)位置運(yùn)動(dòng)。2017-06-05html5 canvas實(shí)現(xiàn)的跟隨鼠標(biāo)光標(biāo)動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)的跟隨鼠標(biāo)光標(biāo)動(dòng)畫特效源碼。共有10種不同的光標(biāo)跟隨動(dòng)畫供用戶選擇使用。用戶只需點(diǎn)擊相應(yīng)的按鈕即可實(shí)現(xiàn)光標(biāo)跟隨特效的切換2017-04-17html5 canvas實(shí)現(xiàn)的跟隨鼠標(biāo)刮風(fēng)下雨動(dòng)畫特效源碼
這是一款基于html5 canvas實(shí)現(xiàn)的跟隨鼠標(biāo)刮風(fēng)下雨動(dòng)畫特效源碼。左右移動(dòng)鼠標(biāo)可見掉落的雨滴隨著鼠標(biāo)移動(dòng)的方向而改變掉落方向,呈現(xiàn)出鼠標(biāo)左右滑動(dòng)控制風(fēng)向的效果。雨滴落2016-06-01html5 canvas實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭
這篇文章主要為大家詳細(xì)介紹了html5 canvas實(shí)現(xiàn)跟隨鼠標(biāo)旋轉(zhuǎn)的箭頭,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-03-11html5 canvas紙飛機(jī)跟隨鼠標(biāo)飛行特效源碼
紙飛機(jī)跟隨鼠標(biāo)飛行特效源碼是一款基于html5 canvas和js制作的紙飛機(jī)跟隨鼠標(biāo)飛行動(dòng)畫效果的代碼。鼠標(biāo)移動(dòng)越大,飛行速度越快2016-02-26