使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效
效果:
實(shí)現(xiàn):
1. 獲取畫布:
// 獲取畫布 var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d");
2.讓畫布自適應(yīng)窗口大小,這個(gè)復(fù)制即可:
// 讓畫布自適應(yīng)窗口大小,這個(gè)復(fù)制即可 window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas();
3. 給畫布css樣式,固定定位,且阻止用戶的鼠標(biāo)事件:
// 給畫布css樣式,固定定位,且阻止用戶的鼠標(biāo)事件 canvas.style.cssText = ` position: fixed; z-index: 1000; pointer-events: none; `
4.定義數(shù)組:
//定義數(shù)組,arr存放每個(gè)小星星的信息,colour為顏色數(shù)組,存幾個(gè)好看的顏色 var arr = []; var colours =["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"];
5.綁定鼠標(biāo)移動(dòng)事件:
//綁定鼠標(biāo)移動(dòng)事件 window.addEventListener('mousemove', e=>{ // 每移動(dòng)觸發(fā)一次事件給arr數(shù)組添加一個(gè)星星 arr.push({ // x是初始橫坐標(biāo) x:e.clientX, //y是初始縱坐標(biāo) y:e.clientY, //r是星星里面那個(gè)小圓半徑,哪來的小圓等會說 r:Math.random()*0.5+1.5, //運(yùn)動(dòng)時(shí)旋轉(zhuǎn)的角度 td:Math.random()*4-2, // X軸移動(dòng)距離 dx:Math.random()*2-1, // y軸移動(dòng)距離 dy:Math.random()*1+1, // 初始的旋轉(zhuǎn)角度 rot: Math.random()*90+90, // 顏色 color: colours[Math.floor(Math.random()*colours.length)] }); })
6.封裝繪制一個(gè)五角星函數(shù):
首先看這個(gè)圖,可以看出繪制一個(gè)五角星可通過在一個(gè)小圓和一個(gè)大圓上各自繪制5個(gè)點(diǎn)然后各個(gè)點(diǎn)順序用線連起來就能形成五角星。
而一個(gè)圓上的點(diǎn)與點(diǎn)之間可以知道是360/5=72度。若圓半徑是R,通過高中數(shù)學(xué)可知每個(gè)點(diǎn)的:
x坐標(biāo)為:R * cos(它的角度)
y坐標(biāo)為:R *sin(它的角度)
還有公式:
弧度 = 角度 * π / 180
因?yàn)镸ath.cos()與Math.sin()里是計(jì)算弧度的,所以要轉(zhuǎn)換。
// 封裝繪制一個(gè)五角星函數(shù) // x是圓心橫坐標(biāo),y是圓心縱坐標(biāo),其實(shí)就是鼠標(biāo)位置(x ,y) // r是里面小圓半徑 ,l是大圓半徑 // rot是初始旋轉(zhuǎn)角度 function star(x,y,r,l,rot){ ctx.beginPath(); // 循環(huán)5次,因?yàn)?個(gè)點(diǎn) for(let i=0;i<5;i++){ //先繪制小圓上一個(gè)點(diǎn) ctx.lineTo(Math.cos((18 + i*72 -rot)*Math.PI/180)*r+x, -Math.sin((18 + i*72 - rot)*Math.PI/180)*r+y); //連線到大圓上一個(gè)點(diǎn) ctx.lineTo(Math.cos((54+i*72-rot)*Math.PI/180)*l+x ,-Math.sin((54+i*72 -rot)*Math.PI/180)*l+y); } ctx.closePath(); }
7. 繪制動(dòng)畫一幀的星星:
// 繪制一堆星星 function draw(){ //循環(huán)數(shù)組 for(let i=0;i<arr.length;i++){ let temp = arr[i]; //調(diào)用繪制一個(gè)星星函數(shù) star(temp.x,temp.y,temp.r,temp.r*3,temp.rot); //星星顏色 ctx.fillStyle = temp.color; //星星邊框顏色 ctx.strokeStyle = temp.color; //線寬度 ctx.lineWidth = 0.1; //角有弧度 ctx.lineJoin = "round"; // 填充 ctx.fill(); // 繪制路徑 ctx.stroke(); } }
8.更新星星位置與大?。?/h3>
//更新動(dòng)畫
function update(){
//循環(huán)數(shù)組
for(let i=0;i<arr.length;i++){
// x坐標(biāo)+dx移動(dòng)距離
arr[i].x += arr[i].dx;
// y坐標(biāo)+dy移動(dòng)距離
arr[i].y += arr[i].dy;
// 加上旋轉(zhuǎn)角度
arr[i].rot += arr[i].td;
// 半徑慢慢減小
arr[i].r -= 0.015;
// 當(dāng)半徑小于0時(shí)
if(arr[i].r<0){
//刪除該星星
arr.splice(i,1);
}
}
}
//更新動(dòng)畫 function update(){ //循環(huán)數(shù)組 for(let i=0;i<arr.length;i++){ // x坐標(biāo)+dx移動(dòng)距離 arr[i].x += arr[i].dx; // y坐標(biāo)+dy移動(dòng)距離 arr[i].y += arr[i].dy; // 加上旋轉(zhuǎn)角度 arr[i].rot += arr[i].td; // 半徑慢慢減小 arr[i].r -= 0.015; // 當(dāng)半徑小于0時(shí) if(arr[i].r<0){ //刪除該星星 arr.splice(i,1); } } }
9.設(shè)置定時(shí)器開始動(dòng)畫:
//設(shè)置定時(shí)器 setInterval(()=>{ //清屏 ctx.clearRect(0,0,canvas.width,canvas.height); //繪制 draw(); //更新 update(); },20) })
10.完整代碼:
window.addEventListener('load',()=>{ // 獲取畫布 var canvas = document.querySelector("#canvas"); var ctx = canvas.getContext("2d"); // 讓畫布自適應(yīng)窗口大小,這個(gè)復(fù)制即可 window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas(); // 給畫布css樣式,固定定位,且阻止用戶的鼠標(biāo)事件 canvas.style.cssText = ` position: fixed; z-index: 1000; pointer-events: none; ` //定義數(shù)組,arr存放每個(gè)小星星的信息,colour為顏色數(shù)組,存幾個(gè)好看的顏色 var arr = []; var colours =["#ffff00","#66ffff","#3399ff","#99ff00","#ff9900"]; //綁定鼠標(biāo)移動(dòng)事件 window.addEventListener('mousemove', e=>{ // 每移動(dòng)觸發(fā)一次事件給arr數(shù)組添加一個(gè)星星 arr.push({ // x是初始橫坐標(biāo) x:e.clientX, //y是初始縱坐標(biāo) y:e.clientY, //r是星星里面那個(gè)小圓半徑,哪來的小圓等會說 r:Math.random()*0.5+1.5, //運(yùn)動(dòng)時(shí)旋轉(zhuǎn)的角度 td:Math.random()*4-2, // X軸移動(dòng)距離 dx:Math.random()*2-1, // y軸移動(dòng)距離 dy:Math.random()*1+1, // 初始的旋轉(zhuǎn)角度 rot: Math.random()*90+90, // 顏色 color: colours[Math.floor(Math.random()*colours.length)] }); }) // 封裝繪制一個(gè)五角星函數(shù) // x是圓心橫坐標(biāo),y是圓心縱坐標(biāo),其實(shí)就是鼠標(biāo)位置(x ,y) // r是里面小圓半徑 ,l是大圓半徑 // rot是初始旋轉(zhuǎn)角度 function star(x,y,r,l,rot){ ctx.beginPath(); // 循環(huán)5次,因?yàn)?個(gè)點(diǎn) for(let i=0;i<5;i++){ //先繪制小圓上一個(gè)點(diǎn) ctx.lineTo(Math.cos((18 + i*72 -rot)*Math.PI/180)*r+x, -Math.sin((18 + i*72 - rot)*Math.PI/180)*r+y); //連線到大圓上一個(gè)點(diǎn) ctx.lineTo(Math.cos((54+i*72-rot)*Math.PI/180)*l+x ,-Math.sin((54+i*72 -rot)*Math.PI/180)*l+y); } ctx.closePath(); } // 繪制一堆星星 function draw(){ //循環(huán)數(shù)組 for(let i=0;i<arr.length;i++){ let temp = arr[i]; //調(diào)用繪制一個(gè)星星函數(shù) star(temp.x,temp.y,temp.r,temp.r*3,temp.rot); //星星顏色 ctx.fillStyle = temp.color; //星星邊框顏色 ctx.strokeStyle = temp.color; //線寬度 ctx.lineWidth = 0.1; //角有弧度 ctx.lineJoin = "round"; // 填充 ctx.fill(); // 繪制路徑 ctx.stroke(); } } //更新動(dòng)畫 function update(){ //循環(huán)數(shù)組 for(let i=0;i<arr.length;i++){ // x坐標(biāo)+dx移動(dòng)距離 arr[i].x += arr[i].dx; // y坐標(biāo)+dy移動(dòng)距離 arr[i].y += arr[i].dy; // 加上旋轉(zhuǎn)角度 arr[i].rot += arr[i].td; // 半徑慢慢減小 arr[i].r -= 0.015; // 當(dāng)半徑小于0時(shí) if(arr[i].r<0){ //刪除該星星 arr.splice(i,1); } } } //設(shè)置定時(shí)器 setInterval(()=>{ //清屏 ctx.clearRect(0,0,canvas.width,canvas.height); //繪制 draw(); //更新 update(); },20) })
到此這篇關(guān)于使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效的文章就介紹到這了,更多相關(guān)JS實(shí)現(xiàn)鼠標(biāo)星星特效內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效,在頁面上移動(dòng)鼠標(biāo),移動(dòng)軌跡上會有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來看看吧2023-03-03跳舞的小人鼠標(biāo)跟隨事件效果實(shí)現(xiàn)
這篇文章主要為大家介紹了跳舞的小人,鼠標(biāo)跟隨事件實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-05-05javascript動(dòng)畫之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球
javascript動(dòng)畫之圓形運(yùn)動(dòng),環(huán)繞鼠標(biāo)運(yùn)動(dòng)作小球(兼容ie,ff,chrome,……)2010-07-07javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果
javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果...2007-11-11JavaScript拖拽效果示例網(wǎng)頁解決快速拖拽的問題
JavaScript拖拽文章的配套示例網(wǎng)頁。本例解決了快速拖拽的時(shí)候元素停止移動(dòng)的問題,需要的朋友可以參考下2012-09-09