Sample code for HTML5 Canvas to implement flame effects like fireball launches

Canvas is a very important and useful thing in HTML5. We can draw any element on Canvas, just like you make Flash. Today we will create a flame emission effect on Canvas. It's like an ancient fireball cannon, and it can bounce off the edge of the browser, which feels pretty cool. Let’s take a look at the renderings:

We can view the DEMO demonstration of the flame ball here

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

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

<canvas></canvas>

canvas{
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  cursor: crosshair;
}

Next, let’s analyze the JS code. Let's break down JS step by step.

Since this is a two-dimensional animation, we use the getContext method of canvas to return a object . This object contains our operations on the two-dimensional animation. API, the code is as follows:

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

Let’s define the particles:

particles = {};
newParticle = (function(){  var nextIndex = 0;  return function(x,y,r,o,c,xv,yv,rv,ov){
    particles[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      r: r,
      o: o,
      c: c,
      xv: xv,
      yv: yv,
      rv: rv,
      ov: ov
    };
  };
})();

Then we define the fireball:

fireballs = {};
newFireball = (function(){  var nextIndex = 0;  return function(x,y,xv,yv,life){
    fireballs[++nextIndex] = {
      index: nextIndex,
      x: x,
      y: y,
      xv: xv,
      yv: yv,
      life: life
    };
  };
})();

Here life means the life of the fireball Period, below we can see that the life value will change with the change of fireball emission intensity.

The next step is to define the mouse to drag the slingshot and prepare to launch the fireball:

mouse = {x:0,y:0,d:0};
onmousemove = function(e){
  mouse.x = e.clientX-o.x;
  mouse.y = e.clientY-o.y;  var dx = mouse.x - pos1.x,
      dy = mouse.y - pos1.y;
  mouse.d = Math.sqrt(dx*dx+dy*dy);
};

charging = false;
pos1 = {x:0,y:0};
showInstructions = true;
onmousedown = function(e){
  pos1.x = mouse.x;
  pos1.y = mouse.y;
  charging = true;
  showInstructions = false;
};

onmouseup = function(){  if(charging){
    newFireball(
      mouse.x,
      mouse.y,
      (pos1.x-mouse.x)*0.03,
      (pos1.y-mouse.y)*0.03,      600
    );
    charging = false;
  }
};

You can see that when the mouse button bounces up, a new fireball is created and the life value is initialized.

The following is the animation execution code when the fireball moves, including the reflection effect when it hits the edge of the browser:

time = 0;
requestAnimationFrame(loop = function(){
  ctx.setTransform(1,0,0,1,0,0);
  ctx.globalCompositeOperation = 'source-over';
  ctx.globalAlpha = 1;
  ctx.fillStyle = bgColor;
  ctx.fillRect(0,0,width,height);
  
  ctx.translate(o.x,o.y);  
  if(charging){    var c = Math.floor(30+mouse.d/2);
    ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)';
    ctx.lineWidth = 4;
    ctx.beginPath();
    ctx.moveTo(pos1.x,pos1.y);
    ctx.lineTo(mouse.x,mouse.y);
    ctx.lineCap = 'round';
    ctx.stroke();
  }  
  if(showInstructions){
    pos1.x = -70;
    pos1.y = -35;    
    if(time<10){      var x = -70,
          y = -35,
          r = 30-time*2,
          a = time/10;
    }else if(time<80){      var x = (time-10)*2-70,
          y = (time-10)-35,
          r = 10,
          a = 1;
    }else if(time<90){      var x = 70,
          y = 35,
          r = 10+(time-80)*2,
          a = 1-(time-80)/10;
    }else if(time<140){      var x = 70,
          y = 35,
          r = 30,
          a = 0;
    }    var dx = pos1.x-x,
        dy = pos1.y-y,
        d = Math.sqrt(dx*dx+dy*dy);    if(time<80&&time>10){
      ctx.globalCompositeOperation = &#39;source-over&#39;;
      ctx.globalAlpha = 1;      var c = Math.floor(30+d/2);
      ctx.strokeStyle = &#39;rgba(&#39;+c+&#39;,&#39;+c+&#39;,&#39;+c+&#39;,1)&#39;;
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.moveTo(pos1.x,pos1.y);
      ctx.lineTo(x,y);
      ctx.lineCap = &#39;round&#39;;
      ctx.stroke();
    }    if(time<140){
      ctx.globalCompositeOperation = &#39;source-over&#39;;
      ctx.globalAlpha = a;
      ctx.beginPath();
      ctx.arc(x,y,r,0,Math.PI*2);
      ctx.lineWidth = 2;
      ctx.strokeStyle = &#39;#aaa&#39;;
      ctx.stroke();
    }    if(time==80){
      newFireball(
        x,
        y,
        dx*0.03,
        dy*0.03,        240
      );
    }
    time = (time+1)%180;
  }
  
  ctx.globalCompositeOperation = &#39;lighter&#39;;  
  for(var i in particles){    
  var p = particles[i];
    ctx.beginPath();
    ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
    ctx.globalAlpha = p.o;
    ctx.fillStyle = p.c;
    ctx.fill();
  }  
  for(var i in particles){    
  var p = particles[i];
    p.x += p.xv;
    p.y += p.yv;
    p.r += p.rv;
    p.o += p.ov;    
    if(p.r<0)delete particles[p.index];    
    if(p.o<0)delete particles[p.index];
  }  
  for(var i in fireballs){
    f = fireballs[i];    
    var numParticles = Math.sqrt(f.xv*f.xv+f.yv*f.yv)/5;    
    if(numParticles<1)numParticles=1;    
    var numParticlesInt = Math.ceil(numParticles),
        numParticlesDif = numParticles/numParticlesInt;    
        for(var j=0;j<numParticlesInt;j++){
      newParticle(
        f.x-f.xv*j/numParticlesInt,
        f.y-f.yv*j/numParticlesInt,
        7,
        numParticlesDif,
        particleColor,
        Math.random()*0.6-0.3,
        Math.random()*0.6-0.3,        
        -0.3,        
        -0.05*numParticlesDif
      );
    }
    f.x += f.xv;
    f.y += f.yv;
    f.yv += gravity;    
    var boundary;    
    if(f.y<(boundary = edge.top+7)){
      f.y = boundary;
      f.yv *= -1;
    }else if(f.y>(boundary = edge.bottom-7)){
      f.y = boundary;
      f.yv *= -1;
    }    if(f.x>(boundary = edge.right-7)){
      f.x = boundary;
      f.xv *= -1;
    }else if(f.x<(boundary = edge.left+7)){
      f.x = boundary;
      f.xv *= -1;
    }    if(--f.life<0)delete fireballs[f.index];
  }
  
  requestAnimationFrame(loop);
});

The above is the detailed content of Sample code for HTML5 Canvas to implement flame effects like fireball launches. For more information, please follow other related articles on the PHP Chinese website!