使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效
更新時(shí)間：2023年03月27日 16:33:01 作者：北極光之夜。
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效,在頁面上移動(dòng)鼠標(biāo),移動(dòng)軌跡上會(huì)有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來看看吧
效果：
實(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è)小圓半徑，哪來的小圓等會(huì)說
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è)小圓半徑，哪來的小圓等會(huì)說
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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
跳舞的小人鼠標(biāo)跟隨事件效果實(shí)現(xiàn)
這篇文章主要為大家介紹了跳舞的小人，鼠標(biāo)跟隨事件實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
利用鼠標(biāo)的位置進(jìn)行計(jì)算偏移代碼2008-09-09
百度空間的一個(gè)好友，其主頁的特效非常漂亮，其中最拉風(fēng)的就是鼠標(biāo)根隨的文字變動(dòng)效果。懶得看亂七八糟的源文件，自己用DW編寫JS模擬了下。2009-11-11
JavaScript拖拽效果示例網(wǎng)頁解決快速拖拽的問題
JavaScript拖拽文章的配套示例網(wǎng)頁。本例解決了快速拖拽的時(shí)候元素停止移動(dòng)的問題，需要的朋友可以參考下2012-09-09
使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效
這篇文章主要介紹了使用JS實(shí)現(xiàn)一個(gè)跟隨鼠標(biāo)移動(dòng)灑落的星星特效,在頁面上移動(dòng)鼠標(biāo),移動(dòng)軌跡上會(huì)有星星灑落,非常的好看炫酷,想知道怎么做的朋友一起來看看吧2023-03-03
隨鼠標(biāo)移動(dòng)的圖片或文字特效！，需要的朋友可以參考下。2011-04-04
javascript動(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-07
跟隨鼠標(biāo)旋轉(zhuǎn)的文字...2006-11-11
javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果
javascript跟隨鼠標(biāo)的文字帶滾動(dòng)效果...2007-11-11
鼠標(biāo)跟隨效果,好多用于廣告點(diǎn)擊,提示效果2008-10-10