HTML5 Canvas flame effect is the same as fireball emission

Canvas is a very important and useful thing in HTML5. We can draw any element on the Canvas, Just like you make Flash. Today, we will create a flame emission effect on the Canvas. Like the fireball gun in ancient times, and it can rebound on the edge of the browser, it feels awkward. Let's take a look:

Of course, we need to analyze the source code, mainly some JS Code.

First, put a canvas label on the page and give it a simple style:

{:;:;:;:;:;:;}

Next we will analyze the JS Code. Let's gradually break down JS.

Because this is a two-dimensional animation, we use the getContext method of canvas to return an object. This object contains our API for two-dimensional animation operations. The Code is as follows:

canvas = document.querySelector('canvas'= canvas.getContext('2d');

Next we will define particles:

particles == ( nextIndex = 0 ++nextIndex] =

Then let's define the fireball:

fireballs == ( nextIndex = 0 ++nextIndex] =

Here, life indicates the life cycle of the fireball. We can see that the life value changes with the change of the fireball launch intensity.

Next we will define the mouse to drag the slingshot and prepare to launch a fireball:

mouse = {x:0,y:0,d:0= = e.clientX-= e.clientY- dx = mouse.x -= mouse.y -= Math.sqrt(dx*dx+dy*= = {x:0,y:0= = === = = -mouse.x)*0.03-mouse.y)*0.03600= 

As you can see, when the mouse clicks, a fireball is created and the life value is initialized.

The following is the animation Execution Code for fireball movement, including the reflection effect when the browser edge is reached:

time = 0= 1,0,0,1,0,0= 'source-over'= 1=0,0 c = Math.floor(30+mouse.d/2);    ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)'= 4= 'round'= -70= -35(time<10 x = -70= -35= 30-time*2= time/10;    } (time<80 x = (time-10)*2-70= (time-10)-35= 10= 1 (time<90 x = 70= 35= 10+(time-80)*2= 1-(time-80)/10;    } (time<140 x = 70= 35= 30= 0 dx = pos1.x-= pos1.y-= Math.sqrt(dx*dx+dy*(time<80&&time>10= 'source-over'= 1 c = Math.floor(30+d/2);      ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)'= 4= 'round'(time<140= 'source-over'=0,Math.PI*2= 2= '#aaa'(time==80*0.03*0.03240= (time+1)%180= 'lighter'( i  p =0,Math.PI*2==( i  p =+=+=+=+=(p.r<0)(p.o<0)( i = numParticles = Math.sqrt(f.xv*f.xv+f.yv*f.yv)/5;    (numParticles<1)numParticles=1 numParticlesInt == numParticles/numParticlesInt;    ( j=0;j<numParticlesInt;j++-f.xv*j/numParticlesInt,        f.y-f.yv*j/numParticlesInt,        7*0.6-0.3*0.6-0.3-0.3-0.05*+=+=+=(f.y<(boundary = edge.top+7=*= -1 (f.y>(boundary = edge.bottom-7=*= -1(f.x>(boundary = edge.right-7=*= -1 (f.x<(boundary = edge.left+7=*= -1(--f.life<0)

This HTML5 Canvas fireball animation is now available. There are many js Code and the final source code can be downloaded here.>