js高级部分实现烟花动画

比眉伴天荒 2022-05-12 07:12 207阅读 0赞

window.requestAnimationFrame=(function (){
        return window.requestAnimationFrame ||
                window.webkitrequestAnimationFrame ||                                    //浏览器兼容性
                window.mozRequestAnimationFrame ||
                function (callback){
                    window.setTimeout(callback,10);
                }
    })();
    
    var canvas=document.getElementById("can_txt");                                  //设置宽和高
    canvas.width=document.documentElement.clientWidth;
    canvas.height=document.documentElement.clientHeight;
    cw=document.documentElement.clientWidth;
    ch=document.documentElement.clientHeight;
    //转化2d模型
    var ctx=canvas.getContext("2d");
    //烟花数组
    var firework=[];
    //烟花碎片数组
    var particles=[];
    var hue=50;//颜色的色调
    timerTick = 0;
    timerTotal=20;
    //随机min max之间的随机值
    function random(min,max){
        return Math.random()*(max-min)+min;
    }
    //计算两点之间的距离
    function distances(sx,sy,tx,ty){
        var xdistances=sx-tx;
        var ydistances=sy-ty;
        return Math.sqrt(Math.pow(xdistances,2)+Math.pow(ydistances,2));
    }
    
    //定义烟花对象
    /*sx,sy  初始坐标  ,tx,ty 目标坐标*/
    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=distances(sx,sy,tx,ty);
        //运行距离
        this.distancesY=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.a=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;
        }
        //根据加速度计算速度
        this.speed*=this.a;
        var vx=Math.cos(this.angle)*this.speed;//x方向的速度
        var vy=Math.sin(this.angle)*this.speed;//y方向的速度
        //重新计算之间的距离
        this.distancesY=distances(this.sx,this.sy,this.x+vx,this.y+vy);
        //判断是否到达目标位置
        if(this.distancesY>=this.targetDistances)
        {
            createParticles(this.tx, this.ty);（实现烟花爆炸的关键）
            firework.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 + '%)';hsl值
        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(2, 10);//随机速度
        this.friction = 0.95;//摩擦力
        this.gravity = 1;//重力
        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();
        this.guiji.unshift([this.x, this.y]);
        this.speed *= this.friction;
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed + this.gravity;
        this.alpha -= this.decay;
        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);
        ctx.strokeStyle = 'hsla(' + this.hue + ',100%,' + this.brightness + '%,' + this.alpha + ')';
        ctx.stroke();
    }
    function createParticles(x, y) {
        //生成300个烟花碎屑
        var particleCount = 300;
        while (particleCount--) {
            particles.push(new Particle(x, y));
        }
    }
    function loop() {
        requestAnimationFrame(loop);
        hue += 0.5;
        ctx.globalCompositeOperation = 'destination-out';//修改源图  当前绘制的显示  源图隐藏
        ctx.fillRect(0, 0, cw, ch);
        ctx.globalCompositeOperation = 'lighter';
        var i = firework.length;
        while (i--) {
            firework[i].draw();
            firework[i].update(i);
        }
        var i = particles.length;
        while (i--) {
            particles[i].draw();
            particles[i].update(i);
        }
        if (timerTick >= timerTotal) {
            //创建烟花对象
            firework.push(new Firework(cw / 2, ch, random(0, cw), random(0, ch)));
            timerTick = 0;//当前时间
        }
        else {
            timerTick++;
        }
    }
        window.onload = loop();

发表评论取消回复

表情：

评论列表（有 0 条评论，207人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css+js实现的新年烟花

html+css+js实现的新年烟花程序效果展示： ![在这里插入图片描述][63a73c9d41384c13aa370500889239cc.png] 烟花简介

女爷i/ 2024年03月30日 17:55/ 0 赞/ 65 阅读

相关 html实现烟花效果‘

<p>好的，首先，你需要创建一个HTML文件，然后在文件中加入一个HTML元素，这样你就可以在其中放置烟花效果。</p> <p>接下来，使用HTML中的canv

川长思鸟来/ 2024年03月27日 18:03/ 0 赞/ 75 阅读

相关原生js实现移动动画，变化动画

初生牛犊不怕虎，想用博客来记录自己以前的一些学习经历，对您有帮助的话请留下你们的赞哦！话不多说进入正题首先我们应该怎么用原生js实现动画，思路是这样的 1. 通过某

浅浅的花香味﹌/ 2023年06月29日 10:53/ 0 赞/ 9 阅读

相关 vue 部分高级

vue 部分高级 $set(name,index,value) 更新name数据的第index项目，并强制更新视图 $nextTick dom节点渲染完毕的

「爱情、让人受尽委屈。」/ 2022年12月10日 14:56/ 0 赞/ 129 阅读

相关 Js烟花代码分享

先展示下图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L

缺乏、安全感/ 2022年10月11日 06:19/ 0 赞/ 237 阅读

相关放烟花JavaScript网页动画js特效

[下载地址][Link 1] JavaScript代码放烟花网页动画特效，可以当做网页背景。 ![1632803161.png][] dd: [Link 1]: ht

逃离我推掉我的手/ 2022年09月13日 14:20/ 0 赞/ 334 阅读

相关自定义动画烟花

/ Created by ylwang on 2017/8/10. / public class LineView extends View {

「爱情、让人受尽委屈。」/ 2022年06月09日 13:35/ 0 赞/ 220 阅读

相关 js高级部分实现烟花动画

window.requestAnimationFrame=(function (){ return window.requestAnimationFra

比眉伴天荒/ 2022年05月12日 07:12/ 0 赞/ 208 阅读

相关 canvas实现烟花特效

> 看过我之前博客的人一定都知道我对canvas赞不绝口，没看过？那就看看下面这篇吧，总结一下对canvas的使用心得就是盘它！实现效果： ![2019022310275

短命女/ 2022年03月17日 08:27/ 0 赞/ 443 阅读

相关 mysql高级部分

mysql逻辑架构 ![图片描述][3205009103-5c554c439b4a8_articlex] 连接层 > 最上层是一些客户端和连接服务，包含本地sco

超、凢脫俗/ 2022年03月08日 13:36/ 0 赞/ 198 阅读