JS如何实现酷炫的烟花特效？（附源码）

猿友 2021-03-10 18:01:05 浏览数 (11788)
反馈

想必有不少人喜欢看烟花吧！绚丽的烟花在黑空中迸发出完美的粒子光芒，并最终无限暗淡至陨落。烟花虽美但易逝，自然是不能经常看到烟花的，那么如果编写一段代码，让它实现烟花绽放效果不就可以了。其实烟花效果并不难实现，仅需用到 JavaScript 即可。

先让我们来看下实现效果：

yanhua

源码：

<!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 实现烟花效果的全部代码。快点动手操作这个有趣的代码吧！！

推荐课程：JavaScript 实战：动态网站开发



JavaScript

10 人点赞

©w3cschool编程狮闽ICP备15016281号-3

违法和不良信息举报电话：173-0602-2364|举报邮箱：jubao@eeedong.com