JavaScript canvas to achieve meteor effects

JavaScript canvas to achieve meteor effects

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 function

function 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 halo

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. Meteor tail

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)
        }

4. Complete code

function 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:
  • JavaScript+html5 canvas to achieve image fragmentation and reorganization animation effects
  • js canvas realizes starry sky background effect
  • js canvas realizes random particle effects
  • Teach you to use dozens of lines of js to achieve cool canvas interactive effects

<<:  Detailed steps to install python3.7 on CentOS6.5

>>:  Detailed explanation of the use of the built-in function locate instr position find_in_set in MySQL efficient fuzzy search

Recommend

Summary of commonly used multi-table modification statements in Mysql and Oracle

I saw this question in the SQL training question ...

Examples of using the ES6 spread operator

Table of contents What are spread and rest operat...

Summary of Creating and Using Array Methods in Bash Scripts

Defining an array in Bash There are two ways to c...

innodb_flush_method value method (example explanation)

Several typical values ​​of innodb_flush_method f...

Docker+nacos+seata1.3.0 installation and usage configuration tutorial

I spent a day on it before this. Although Seata i...

Vue implements Modal component based on Teleport

Table of contents 1. Get to know Teleport 2. Basi...

React example of how to get the value of the input box

React multiple ways to get the value of the input...

Four modes of Oracle opening and closing

>1 Start the database In the cmd command windo...

7 skills that great graphic designers need to master

1》Be good at web design 2》Know how to design web p...

How to implement parallel downloading of large files in JavaScript

Table of contents 1. HTTP Range Request 1.1 Range...

js object to achieve data paging effect

This article example shares the specific code of ...

Axios cancels repeated requests

Table of contents Preface 1. How to cancel a requ...

Simple example of adding and removing HTML nodes

Simple example of adding and removing HTML nodes ...

React encapsulates the global bullet box method

This article example shares the specific code of ...