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

How to connect to a remote server and transfer files via a jump server in Linux

Recently, I encountered many problems when deploy...

How to use nginx as a proxy cache

The purpose of using cache is to reduce the press...

How Database SQL SELECT Queries Work

As Web developers, although we are not profession...

Vue opens a new window and implements a graphic example of parameter transfer

The function I want to achieve is to open a new w...

How to manually scroll logs in Linux system

Log rotation is a very common function on Linux s...

CSS flexible layout FLEX, media query and mobile click event implementation

flex layout Definition: The element of Flex layou...

MySQL learning record: bloody incident caused by KEY partition

Demand background Part of the data in the busines...

How to run MySQL using docker-compose

Directory Structure . │ .env │ docker-compose.yml...

MySQL slow query: Enable slow query

1. What is the use of slow query? It can record a...

Docker Nginx container production and deployment implementation method

Quick Start 1. Find the nginx image on Docker Hub...

A simple method to implement scheduled backup of MySQL database in Linux

Here are the detailed steps: 1. Check the disk sp...

CSS sets the box container (div) height to always be 100%

Preface Sometimes you need to keep the height of ...