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 Component Communication Introdu...
Docker takes up a lot of space. Whenever we run c...
Table of contents 1. Problem Description 2. Cause...
When it comes to <fieldset> and <legend&...
Table of contents Introduction: Installation of e...
<!--[if lte IE 6]> <![endif]--> Visibl...
When installing packages on an Ubuntu server, you...
It's simple, just go to the tutorial, blogger...
First, let's talk about the in() query. It is...
First, the HTML code to embed the video in the pag...
1. Overview of DDL Atomicity Before 8.0, there wa...
Original configuration: http { ...... limit_conn_...
When displaying long data in HTML, you can cut off...
introduction If you are familiar with using JDBC ...
What is a table? Table is an Html table, a carrie...