JavaScript canvas实现流星特效
更新时间：2021年05月20日 15:20:54 作者：no bug no life
这篇文章主要为大家详细介绍了JavaScript canvas实现流星特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了videojs添加自定义组件的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-12-12
本文通过实例详细向我们分析了javascript原型链维护和继承的问题，十分的详尽，十分的全面，这里推荐给大家。2014-11-11
这篇文章主要介绍了微信小程序模板语法，WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
JavaScript中toLocaleString()和toString()的区别实例分析
这篇文章主要介绍了JavaScript中toLocaleString()和toString()的区别,结合实例形式对比分析了toLocaleString()和toString()针对字符串、数组与日期操作过程中的区别与使用技巧,需要的朋友可以参考下2018-08-08
数独（すうどく，Sūdoku）是一种运用纸、笔进行演算的逻辑游戏。玩家需要根据9×9盘面上的已知数字，推理出所有剩余空格的数字，并满足每一行、每一列、每一个粗线宫内的数字均含1-9，不重复。2015-03-03
这篇文章主要介绍了关于d3.js数据绑定的相关资料，文中通过示例代码介绍的非常详细，对大家学习只d3.js具有一定的参考价值，需要的朋友下面来一起看看吧。2017-04-04
这篇文章主要介绍了js核心基础之构造函数constructor用法,结合具体实例形式分析了javascript构造函数constructor概念、原理、使用方法及相关操作注意事项,需要的朋友可以参考下2019-05-05
JS Object.preventExtensions(),Object.seal()与Object.freeze()用
这篇文章主要介绍了JS Object.preventExtensions(),Object.seal()与Object.freeze()用法,结合实例形式分析了javascript控制对象扩展、密封、冻结等相关函数与操作技巧,需要的朋友可以参考下2018-08-08
这篇文章主要介绍当输入框输入数值的时候使用js去除所有的空格和禁止输入空格的方法,需要的朋友可以参考下2014-06-06
这篇文章主要介绍了javascript面向对象之定义成员方法,实例分析了成员方法的定义与使用技巧,需要的朋友可以参考下2015-01-01
最新评论