This article shares the specific code for JavaScript canvas to achieve meteor special effects display for your reference. The specific content is as follows 1. Control transparency change functionfunction easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x valuelet y = x*x; //y valuereturn begin+(end-begin)*y; //insert the original formula} //Core function of slow deceleration motion constructed with square root: x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x valuelet y = -x*x + 2*x; //y valuereturn begin+(end-begin)*y; //insert the original formula} function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //First half of the time return easeInQuad(curtime,begin,(begin+end)/2,duration/2); //Change amount and time are divided by 2 }else{ let curtime1 = curtime-duration/2; //Note that the time should be subtracted from the first half let begin1 = (begin+end)/2; //The initial amount should be added to the amount completed in the first half return easeOutQuad(curtime1,begin1,end,duration/2); //The change amount and time are divided by 2 } } 2. Flashing effects of meteor halofunction 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. Meteor tailfunction 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 = gi/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. Complete codefunction easeInQuad(curtime,begin,end,duration){ let x = curtime/duration; //x valuelet y = x*x; //y valuereturn begin+(end-begin)*y; //insert the original formula} //Core function of slow deceleration motion constructed with square root: x*x + 2*x function easeOutQuad(curtime,begin,end,duration){ let x = curtime/duration; //x valuelet y = -x*x + 2*x; //y valuereturn begin+(end-begin)*y; //insert the original formula} function easeInoutQuad(curtime,begin,end,duration){ if(curtime<duration/2){ //First half of the time return easeInQuad(curtime,begin,(begin+end)/2,duration/2); //Change amount and time are divided by 2 }else{ let curtime1 = curtime-duration/2; //Note that the time should be subtracted from the first half let begin1 = (begin+end)/2; //The initial amount should be added to the amount completed in the first half return easeOutQuad(curtime1,begin1,end,duration/2); //The change amount and time are divided by 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 = gi/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) The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: Detailed steps to install python3.7 on CentOS6.5
Compared with Windows system, Linux system provid...
First, let’s think about a question: To insert su...
There are three types of attribute value regular ...
Table of contents 1. Front-end leading process: 2...
Table of contents WXS Response Event Plan A Page ...
Link: https://qydev.weixin.qq.com/wiki/index.php?...
The creation of the simplest hello world output i...
MySQL View the maximum number of connections and ...
system: VMTOOLs Download: Link: https://pan.baidu...
Table of contents What is a trigger Create a trig...
MySQL deduplication methods 【Beginner】There are v...
1. Always close HTML tags In the source code of p...
Table of contents 1. Prototype chain inheritance ...
How to install and configure mysql-5.7.5-m15-winx...
Table of contents 1. What is two-way data binding...