JavaScript canvas实现流星特效


Posted in Javascript onMay 20, 2021

本文实例为大家分享了JavaScript canvas实现流星特效展示的具体代码,供大家参考,具体内容如下

1、控制透明度变化函数

function easeInQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x值
            let y = x*x; //y值
            return begin+(end-begin)*y; //套入最初的公式
        }
        //用平方根构建的缓慢减速运动  核心函数:x*x + 2*x
function easeOutQuad(curtime,begin,end,duration){
            let x = curtime/duration;         //x值
            let y = -x*x + 2*x;  //y值
            return begin+(end-begin)*y;        //套入最初的公式
        }
function easeInoutQuad(curtime,begin,end,duration){
            if(curtime<duration/2){ //前半段时间
                return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2
            }else{
                let curtime1 = curtime-duration/2; //注意时间要减去前半段时间
                let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的
                return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2
            }
}

2、流星星体光环的闪烁特效

function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {
            if(fadeOpcity(cur,start,end,dur)===end){
                cur = 0
                let temp = start
                start = end 
                end = temp
            }
            let opcity = fadeOpcity(cur,start,end,dur)
            let color = `rgba(0,0,0,${opcity})`
            clearBgcolor(wrap)
            newParticle (wrap,[x,y],r,color)
            cur=parseFloat(cur+0.1)
            setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33)
}

3、流星尾巴

function intervalMove (speed,g=0) {
            if(g===720){
                g = 360
            }
            g = g+speed
            let nextPosition = movePosition (a,g,startPosition)
            x = nextPosition[0]
            y = nextPosition[1]
            clearBgcolor(wrap1)
            for(let i =1;i<=360;i++){
                let g1 = g-i/2
                if(g1<0&&g<=360){
                    break
                }
                let g1Position = movePosition (a,g1,startPosition)
                newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`)
            }
            setTimeout(()=>{intervalMove (speed,g)},33)
        }

4、完整代码

function easeInQuad(curtime,begin,end,duration){
            let x = curtime/duration; //x值
            let y = x*x; //y值
            return begin+(end-begin)*y; //套入最初的公式
        }
        //用平方根构建的缓慢减速运动  核心函数:x*x + 2*x
        function easeOutQuad(curtime,begin,end,duration){
            let x = curtime/duration;         //x值
            let y = -x*x + 2*x;  //y值
            return begin+(end-begin)*y;        //套入最初的公式
        }
        function easeInoutQuad(curtime,begin,end,duration){
            if(curtime<duration/2){ //前半段时间
                return easeInQuad(curtime,begin,(begin+end)/2,duration/2);//改变量和时间都除以2
            }else{
                let curtime1 = curtime-duration/2; //注意时间要减去前半段时间
                let begin1 = (begin+end)/2;//初始量要加上前半段已经完成的
                return easeOutQuad(curtime1,begin1,end,duration/2);//改变量和时间都除以2
            }
        }
        function newCanvas (width,height) {
            let bodyEl = document.body
            let canvasEl = document.createElement("canvas")
            canvasEl.width = width
            canvasEl.height = height
            canvasEl.style.position = "absolute"
            bodyEl.append(canvasEl)
            let wrap = canvasEl.getContext("2d")
            return wrap
        }
        function setBgcolor (wrap,color) {
            wrap.fillStyle=color;
            wrap.fillRect(0,0,wrap.canvas.width,wrap.canvas.height);
        }
        function clearBgcolor(wrap){
            wrap.clearRect(0,0,wrap.canvas.width,wrap.canvas.height)
        } 
        function newParticle (wrap,position,r,color) {
            let x = position[0]
            let y = position[1]
            wrap.fillStyle=color;
            wrap.beginPath();
            wrap.arc(x,y,r,0,2*Math.PI);
            wrap.shadowBlur=20;
            wrap.shadowColor=`rgba(255,255,255,0.8)`;
            wrap.fill();
        }
        function fadeOpcity(cur,start,end,dur){
            let opcity = parseFloat(easeInoutQuad(cur,start,end,dur).toFixed(2)) 
            return opcity
        }
       let wrap0 = newCanvas (1000,800)
       let wrap2 = newCanvas (1000,800)
       let wrap = newCanvas (1000,800)
       let wrap1 = newCanvas (1000,800)
       
        setBgcolor (wrap0,"black")
        setBgcolor (wrap,"rgba(0,0,0,0)")
        setBgcolor (wrap1,"rgba(0,0,0,0)")
        setBgcolor (wrap2,"rgba(0,0,0,0)")
        let startPosition = [500,200]
        let r = 10
        let a = -200
        let x =  a*(1-Math.cos(0))*Math.sin(0)+startPosition[0]
        let y = a*(1-Math.cos(0))*Math.cos(0)+startPosition[1]
        function movePosition (a,g,startPosition) {
            let t = Math.PI*2/360
            let x = a*(1-Math.cos(g*t))*Math.sin(g*t)+startPosition[0]
            let y = a*(1-Math.cos(g*t))*Math.cos(g*t)+startPosition[1]
            return [x,y]
        }
        function intervalMove (speed,g=0) {
            if(g===720){
                g = 360
            }
            g = g+speed
            let nextPosition = movePosition (a,g,startPosition)
            x = nextPosition[0]
            y = nextPosition[1]
            clearBgcolor(wrap1)
            for(let i =1;i<=360;i++){
                let g1 = g-i/2
                if(g1<0&&g<=360){
                    break
                }
                let g1Position = movePosition (a,g1,startPosition)
                newParticle (wrap1,[g1Position[0],g1Position[1]],r/(1+i/5),`rgba(255,200,200,0.5)`)
            }
            setTimeout(()=>{intervalMove (speed,g)},33)
        }

        function intervalOpcity (cur=0,start=0.3,end=0.8,dur=3) {
            if(fadeOpcity(cur,start,end,dur)===end){
                cur = 0
                let temp = start
                start = end 
                end = temp
            }
            let opcity = fadeOpcity(cur,start,end,dur)
            let color = `rgba(0,0,0,${opcity})`
            clearBgcolor(wrap)
            newParticle (wrap,[x,y],r,color)
            cur=parseFloat(cur+0.1)
            setTimeout(()=>{intervalOpcity (cur,start,end,dur)},33)
        }
intervalOpcity ()
intervalMove (1)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery 的一个progressbar widge
Oct 29 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
Javascript函数的参数
Jul 16 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
JavaScript中引用vs复制示例详析
Dec 06 Javascript
使用vue-router在Vue页面之间传递数据的方法
Jul 15 Javascript
vue+element tabs选项卡分页效果
Jun 29 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
JavaScript实现班级抽签小程序
May 19 #Javascript
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
Vue Element UI自定义描述列表组件
You might like
PHP字符串处理的10个简单方法
2010/06/30 PHP
PHP抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
php获取本周开始日期和结束日期的方法
2015/03/09 PHP
HR vs CL BO3 第一场 2.13
2021/03/10 DOTA
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
通过Javascript将数据导出到外部Excel文档的函数代码
2012/06/15 Javascript
基于jquery的用鼠标画出可移动的div
2012/09/06 Javascript
Javascript让DEDECMS告别手写Tag
2014/09/01 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery的Each比JS原生for循环性能慢很多的原因
2016/07/05 Javascript
js继承实现方法详解
2016/12/16 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
jQuery Autocomplete简介_动力节点Java学院整理
2017/07/17 jQuery
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
一步步教会你微信小程序的登录鉴权
2018/04/09 Javascript
vue实现自定义日期组件功能的实例代码
2018/11/06 Javascript
JavaScript实现简单日历效果
2020/09/11 Javascript
[01:28:31]《加油DOTA》真人秀 第五期
2014/09/01 DOTA
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
Python操作Mysql实例代码教程在线版(查询手册)
2013/02/18 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
python如何获取列表中每个元素的下标位置
2019/07/01 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python关于调用函数外的变量实例
2019/12/26 Python
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
党支部换届选举方案
2014/05/08 职场文书
2014年乡镇人大工作总结
2014/11/25 职场文书
门市房租房协议书
2014/12/04 职场文书
2019年感恩励志演讲稿(收藏备用)
2019/09/11 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
【2·13】一图读懂中国无线电发展
2022/02/18 无线电