溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JS怎么實現酷炫的煙花特效”，在日常操作中，相信很多人在JS怎么實現酷炫的煙花特效問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS怎么實現酷炫的煙花特效”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
源碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>JS實現煙花特效-W3C技術頭條</title>
<style>
body{
margin: 0;
padding: 0;
background: url("./images/background-image.png") no-repeat center center fixed;
/*兼容瀏覽器版本*/
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
//window.requestAnimationFrame()這個API是瀏覽器提供的js全局方法，針對動畫效果。
window.requestAnimationFrame=(function(){
return window.requestAnimationFrame||
window.webkitRequestAnimationFrame||
window.mozRequestAnimationFrame||
function (callback){
window.setTimeout(callback,1000)
//每間隔10秒執行一次動畫
}
})();
//獲取canvas區域.并設置寬和高
var area=document.getElementById("mycanvas");
area.width=document.documentElement.clientWidth;
area.height=document.documentElement.clientHeight;
//轉換成2d模型
var ctx=area.getContext("2d");
//煙花數組
hue=120;//設置顏色范圍
timerTick = 0;//計時器
timerTotal=5;//每間隔5秒煙花綻放一次
fireworks=[];//存放煙花數組
particles=[];//存放碎屑數組
//隨機min和max之間的值
function random(min,max){
return Math.random()*(max-min)+min;
}
//計算兩點之間的距離
function distans(sx,sy,tx,ty){
var xdistan=sx-tx;
var ydistan=sy-ty;
return Math.sqrt((Math.pow(xdistan,2)+Math.pow(ydistan,2)));
}
//定義煙花對象
function Firework(sx,sy,tx,ty){
this.x=sx;
this.y=sy;
this.sx=sx;
this.sy=sy;
this.tx=tx;
this.ty=ty;
//計算兩點之間的距離
this.targetDistances=distans(sx,sy,tx,ty);
//運行距離
this.distancesc=0;
//定義變量生成的運動軌跡
this.guiji=[];
this.guijicount=3;
while(this.guijicount--){
this.guiji.push([this.x,this.y]);
}
//計算角度
this.angle=Math.atan2(ty-sy,tx-sx);
this.speed=2;
this.jiasudu=1.05;
this.brightness=random(50,70);//煙花的明度
this.targetRad=5;//煙花小圈的半徑
}
//更新煙花的位置
Firework.prototype.update=function(index){
this.guiji.pop();
this.guiji.push([this.x,this.y]);
//目標圓運動
if(this.targetRad<8){
this.targetRad+=0.3;
}else{
this.targetRad=1;
}
//根據加速度計算速度并且計算出煙花運行過程中x軸和y軸的速度
this.speed*=this.jiasudu;
var vx=Math.cos(this.angle)*this.speed;
var vy=Math.sin(this.angle)*this.speed;
//重新計算兩點之間的距離
this.distancesc=distans(this.sx,this.sy,this.x+vx,this.y+vy);
//如果煙花運行距離大于或等于初始位置到目標位置之間的距離，生成新煙花并移除當前煙花，否則更新煙花位置
if(this.distancesc>=this.targetDistances){
//生成煙花碎屑
createparticals(this.tx,this.ty);
//銷毀煙花小圈
fireworks.splice(index,1)
}else{
this.x+=vx;
this.y+=vy;
}
}
//開始畫運行軌跡
Firework.prototype.draw=function(){
ctx.beginPath();
//軌跡的起點
ctx.moveTo(this.guiji[this.guiji.length-1][0],this.guiji[this.guiji.length-1][1]);
//繪制線條到目標點
ctx.lineTo(this.x,this.y);
//畫出不同顏色的煙花
ctx.strokeStyle='hsl('+hue+',100%,'+this.brightness+'%)';
ctx.stroke();//繪制煙花軌跡
//畫出目標小圓
ctx.beginPath();
ctx.arc(this.tx,this.ty,this.targetRad,0,Math.PI*2);
ctx.stroke();
}
//定義煙花碎屑方法
function Particle(x, y) {
this.x = x;
this.y = y;
this.guiji = [];
this.guijicount = 10;
while(this.guijicount--){
this.guiji.push([this.x,this.y]);
}
//生成任意方向的碎屑
this.angle=random(0 , 2*Math.PI);
this.speed=random(1,10);//隨機的速度
this.mocal=0.95;//摩擦力
this.gravity=0.98;//重力
this.hue=random(hue-20,hue+20);//碎屑顏色變化范圍
this.brightness=random(50,80);
this.alpha=1;//定義碎屑初始不透明
this.decay=random(0.015,0.03);//碎屑消失的時間
}
//更新碎屑
Particle.prototype.update=function(index){
this.guiji.pop();
//unshift() 方法可向數組的開頭添加一個或更多元素，并返回新的長度。
this.guiji.unshift([this.x,this.y]);
//下面是煙花碎屑的運動
this.speed*=this.mocal;
this.x+=Math.cos(this.angle)*this.speed;
this.y+=Math.sin(this.angle)*this.speed+this.gravity;
this.alpha-=this.decay;//不透明度一直隨時間變為0；即煙花碎屑消失
if(this.alpha<=this.decay){
particles.splice(index,1)//銷毀煙花碎屑
}
}
//畫煙花碎屑軌跡
Particle.prototype.draw=function(){
ctx.beginPath();
ctx.moveTo(this.guiji[this.guiji.length-1][0],this.guiji[this.guiji.length-1][1]);
ctx.lineTo(this.x,this.y);
//畫出不同顏色的煙花利用HSL
ctx.strokeStyle='hsl('+hue+',100%,'+this.brightness+'%)';
ctx.stroke();
}
//創建碎屑
function createparticals(x,y){
//設定碎屑數目
var particalcount=500;
while(particalcount--){
//隨著碎屑數目的減少為0，又重新調用碎屑方法
particles.push(new Particle(x,y))
}
}
//獲取屏幕的寬和高
var clientw=document.documentElement.clientWidth;
var clienth=document.documentElement.clientHeight;
function loop(){
//requestAnimationFrame() 方法來告訴瀏覽器需要執行的動畫，
// 并讓瀏覽器在下一次重繪之前調用指定的函數來更新動畫。
requestAnimationFrame(loop);
hue+=0.5;
//在源圖像外顯示目標圖像。只有源圖像外的目標圖像部分會被顯示，源圖像是透明的。
ctx.globalCompositeOperation = 'destination-out';
ctx.fillRect(0,0,clientw,clienth);
ctx.fillStyle='rgb(0,0,0,0.5)';
//顯示源圖像和目標圖像。
ctx.globalCompositeOperation='lighter';
var i=fireworks.length;
while(i--){
fireworks[i].draw();
fireworks[i].update(i);
}
var i=particles.length;
while(i--){
particles[i].draw();
particles[i].update(i);
}
//此時，我們還沒有創建任何的煙花。我們希望設置一個定時時間timerTotal，周期性的
// 產生一個煙花，我們也需要一個時間計數timerTick，在每次幀更新的時候加1，記下幀更新的次數。
if(timerTick>=timerTotal)
{
fireworks.push(new Firework(clientw/2,clienth,random(0,clientw),random(0,clienth)));
timerTick=0;
}
else{
timerTick++;
}
}
window.οnlοad=loop();
</script>
</body>
</html>如果沒有黑夜背景圖，可以直接把背景顏色設置為黑色。
background-color: black;到此，關于“JS怎么實現酷炫的煙花特效”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
