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
Table of contents 1. Original demand 2. Solution ...
I don't know if you have ever encountered suc...
Recently, I encountered many problems when deploy...
The purpose of using cache is to reduce the press...
As Web developers, although we are not profession...
1 QPS calculation (number of queries per second) ...
The function I want to achieve is to open a new w...
Log rotation is a very common function on Linux s...
flex layout Definition: The element of Flex layou...
Demand background Part of the data in the busines...
Directory Structure . │ .env │ docker-compose.yml...
1. What is the use of slow query? It can record a...
Quick Start 1. Find the nginx image on Docker Hub...
Here are the detailed steps: 1. Check the disk sp...
Preface Sometimes you need to keep the height of ...