Beispielcode für HTML5 Canvas zur Implementierung von Flammeneffekten wie dem Abfeuern von Feuerbällen

Canvas ist eine sehr wichtige und nützliche Sache in HTML5 Wir können jedes Element auf Canvas zeichnen, genau wie Sie Flash erstellen. Heute werden wir einen Flammenemissionseffekt auf Leinwand erzeugen. Es ist wie eine alte Feuerballkanone und kann vom Rand des Browsers abprallen, was sich ziemlich cool anfühlt. Werfen wir einen Blick auf die Renderings:

Die DEMO-Demonstration des Flammenballs können wir hier ansehen

Natürlich müssen wir den Quellcode analysieren, hauptsächlich etwas JS-Code.

Fügen Sie zunächst einfach ein Canvas-Tag auf der Seite ein und geben Sie ihr einen einfachen Stil:

<canvas></canvas>

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

Dann analysieren wir den JS-Code. Lassen Sie uns JS Schritt für Schritt aufschlüsseln.

Da es sich um eine zweidimensionale -Animation handelt, verwenden wir die getContext-Methode von Canvas, um ein -Objekt zurückzugeben, das unsere -Operationen für zweidimensional enthält Animation. API, der Code lautet wie folgt:

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

Als nächstes definieren wir Partikel:

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

Dann definieren wir Feuerball:

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

Hier bedeutet Leben: Der Lebenszyklus des Feuerballs. Wie wir unten sehen können, ändert sich der Lebenswert, wenn sich die Intensität des Feuerballabschusses ändert.

Der nächste Schritt besteht darin, die Maus zu definieren, um die Schleuder zu ziehen und den Start des Feuerballs vorzubereiten:

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

Wie Sie sehen können, entsteht ein neuer Feuerball, wenn die Maustaste nach oben springt erstellt und der Lebenswert initialisiert.

Das Folgende ist der Animationsausführungscode, wenn sich der Feuerball bewegt, einschließlich des Reflexionseffekts, wenn er den Rand des Browsers trifft:

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

Das obige ist der detaillierte Inhalt vonBeispielcode für HTML5 Canvas zur Implementierung von Flammeneffekten wie dem Abfeuern von Feuerbällen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!