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 相关文章推荐
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
JQuery选择器绑定事件及修改内容的方法
Jan 23 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
JS中的二叉树遍历详解
Mar 18 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
Nov 25 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
Dec 26 Javascript
微信小程序自定义toast组件的方法详解【含动画】
May 11 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
js实现三角形粒子运动
Sep 22 Javascript
vue使用节流函数的踩坑实例指南
vue实现同时设置多个倒计时
May 20 #Vue.js
Vue和Flask通信的实现
JavaScript实现班级抽签小程序
May 19 #Javascript
JS实现扫雷项目总结
深入浅析React中diff算法
May 19 #Javascript
Vue Element UI自定义描述列表组件
You might like
yii实现图片上传及缩略图生成的方法
2014/12/04 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
2013/05/27 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
BootStrap注意事项小结(五)表单
2017/03/10 Javascript
浅析bootstrap原理及优缺点
2017/03/19 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
javascript实现文字无缝滚动效果
2017/08/26 Javascript
JS去掉字符串中所有的逗号
2017/10/18 Javascript
EasyUI实现下拉框多选功能
2017/11/07 Javascript
JS 仿支付宝input文本输入框放大组件的实例
2017/11/14 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
微信小程序实现侧边栏分类
2019/10/21 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
2020/03/06 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python笔记(1) 关于我们应不应该继续学习python
2012/10/24 Python
python遍历数组的方法小结
2015/04/30 Python
详解Python发送邮件实例
2016/01/10 Python
Python注释详解
2016/06/01 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
护理专业推荐信
2013/11/07 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
文明单位申报材料
2014/12/23 职场文书
2015财务年度工作总结范文
2015/05/04 职场文书
2015年教研组工作总结
2015/05/04 职场文书
品德与社会教学反思
2016/02/24 职场文书