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

Detailed explanation of React component communication

Table of contents Component Communication Introdu...

How to clean up the disk space occupied by Docker

Docker takes up a lot of space. Whenever we run c...

Keep-alive multi-level routing cache problem in Vue

Table of contents 1. Problem Description 2. Cause...

React uses emotion to write CSS code

Table of contents Introduction: Installation of e...

Detailed explanation of the update command for software (library) under Linux

When installing packages on an Ubuntu server, you...

MySQL SQL Optimization Tutorial: IN and RANGE Queries

First, let's talk about the in() query. It is...

MySQL 8.0 DDL atomicity feature and implementation principle

1. Overview of DDL Atomicity Before 8.0, there wa...

Example of setting up a whitelist in Nginx using the geo module

Original configuration: http { ...... limit_conn_...

How to handle long data when displaying it in html

When displaying long data in HTML, you can cut off...

In-depth analysis of HTML table tags and related line break issues

What is a table? Table is an Html table, a carrie...