返回顶部
首页 > 资讯 > 精选 >JS怎么实现酷炫的烟花特效
  • 495
分享到

JS怎么实现酷炫的烟花特效

2023-06-27 09:06:28 495人浏览 泡泡鱼
摘要

这篇文章主要介绍“js怎么实现酷炫的烟花特效”,在日常操作中,相信很多人在JS怎么实现酷炫的烟花特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS怎么实现酷炫的烟花特效”的疑惑有所帮助!接下来,请跟着小编

这篇文章主要介绍“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怎么实现酷炫的烟花特效”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注编程网网站,小编会继续努力为大家带来更多实用的文章!

--结束END--

本文标题: JS怎么实现酷炫的烟花特效

本文链接: https://www.lsjlt.com/news/309281.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JS怎么实现酷炫的烟花特效
    这篇文章主要介绍“JS怎么实现酷炫的烟花特效”,在日常操作中,相信很多人在JS怎么实现酷炫的烟花特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JS怎么实现酷炫的烟花特效”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-27
  • js实现炫酷的烟花效果
    本文实例为大家分享了js实现炫酷的烟花效果的具体代码,供大家参考,具体内容如下 我们要理清整个流程的思路。 首先建立一块画布,用于展示烟花的效果,然后就要去思考烟花燃放的流程,我们都...
    99+
    2024-04-02
  • 基于JS怎么实现酷炫的网页特效
    这篇文章主要介绍了基于JS怎么实现酷炫的网页特效的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇基于JS怎么实现酷炫的网页特效文章都会有所收获,下面我们一起来看看吧。1、鼠标点击弹出爱心代码<!DOCTYP...
    99+
    2023-06-30
  • HTML5中怎么用Canvas实现超炫酷烟花绽放动画
    这篇文章主要介绍了HTML5中怎么用Canvas实现超炫酷烟花绽放动画的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇HTML5中怎么用Canvas实现超炫酷烟花绽放动画文章都会...
    99+
    2024-04-02
  • JavaScript怎么实现带音效的烟花特效
    这篇文章主要介绍“JavaScript怎么实现带音效的烟花特效”,在日常操作中,相信很多人在JavaScript怎么实现带音效的烟花特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”JavaScript怎么实...
    99+
    2023-06-22
  • 怎么使用canvas实现烟花特效
    小编给大家分享一下怎么使用canvas实现烟花特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!canvas可以实现不同动画效果,本文主要记录几种不同节日烟花效果...
    99+
    2023-06-09
  • 基于JS实现十种酷炫的网页特效
    目录1、鼠标点击弹出爱心2、鼠标点击弹出文字3、鼠标点击弹出烟花波纹4、鼠标小星星拖尾跟随5、鼠标粒子随心拖尾跟随6、鼠标笑脸跟随+仙女棒+泡泡+雪花+点击烟花效果(自由组合)7、樱...
    99+
    2024-04-02
  • 大气炫酷焦点轮播图js特效怎么实现
    本篇内容主要讲解“大气炫酷焦点轮播图js特效怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“大气炫酷焦点轮播图js特效怎么实现”吧! 代码如下:...
    99+
    2024-04-02
  • JavaScript实现带音效的烟花特效
    花了半个小时写的代码,这个html5 canvas新年烟花一定不会让大家失望! 首先我们看下静态的效果图: 文章末尾有动态的效果图,滑动即可看到!  JavaScript代码如下:...
    99+
    2024-04-02
  • 如何用JS代码实现文字烟花特效
    如何用JS代码实现文字烟花特效,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。之前我出了一个如何在网页里使用原生JS开发放烟花效果的教程。i...
    99+
    2024-04-02
  • JavaScript怎么实现烟花和福字特效
    这篇文章主要讲解了“JavaScript怎么实现烟花和福字特效”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“JavaScript怎么实现烟花和福字特效”吧!超能力一:放烟花先带大家看看实现后...
    99+
    2023-06-26
  • 如何使用JS实现酷炫代码雨特效
    这篇“如何使用JS实现酷炫代码雨特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“如何使用JS实现酷炫代码雨特效”文章吧。效...
    99+
    2023-07-04
  • 怎么用Python代码实现最炫的烟花
    这篇文章主要介绍“怎么用Python代码实现最炫的烟花”,在日常操作中,相信很多人在怎么用Python代码实现最炫的烟花问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用Python代码实现最炫的烟花”的疑...
    99+
    2023-06-29
  • JavaScript实现烟花和福字特效
    目录超能力一:放烟花超能力二:写福字隐藏能力:只有程序员能看懂的祝福虎虎生威、虎年大吉。 事事都如意,虎虎有生气…… 都2022了你还在从网上复制粘贴这些...
    99+
    2024-04-02
  • HTML5和Canvas怎么实现烟花绽放特效
    这篇文章给大家分享的是有关HTML5和Canvas怎么实现烟花绽放特效的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果如下:undefinedundefinedundefined代码如下:XML/HTML Co...
    99+
    2023-06-09
  • 原生JS实现酷炫分页效果
    本文实例为大家分享一个如下效果的JS分页特效,是不是很酷炫。  以下是代码实现: <!DOCTYPE html> <html> <h...
    99+
    2024-04-02
  • HTML5中怎么用Canvas实现烟花绽放特效
    这篇文章主要介绍“HTML5中怎么用Canvas实现烟花绽放特效”,在日常操作中,相信很多人在HTML5中怎么用Canvas实现烟花绽放特效问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2024-04-02
  • 怎么使用html和JavaScript实现3D烟花特效
    今天小编给大家分享一下怎么使用html和JavaScript实现3D烟花特效的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。效...
    99+
    2023-07-04
  • JavaScript实现烟花特效(面向对象)
    本文实例为大家分享了JavaScript实现烟花特效的具体代码,供大家参考,具体内容如下 本特效使用面向对象编程 分析 OOA 点击触发事件 烟花运动分成两个阶段 ...
    99+
    2024-04-02
  • JavaScript实现五种不同烟花特效
    目录 一、简单大气的烟花二、在农村看到的烟花三、可点击的烟花四、3D旋转烟花五、可拖动视角的自定义烟花 一、简单大气的烟花 演示地址:http://haiyong...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作