本文作者html5tricks，转载请注明出处

这又是一款基于HTML5 Canvas火焰燃烧动画和纯CSS3实现打火机火焰动画。一般像这样的

接下来我们要简单分析一下实现这款HTML5火焰燃烧动画的具体步骤和代码，主要由HTML代码、CSS代码和Javascript代码组成。

HTML代码：

这里我们仅仅是定义了一个canvas容器，我们的火焰效果就是在canvas上绘制而成的。

接下来是CSS代码，也非常简单。

CSS代码：

.wrapper {

margin: 20px auto;

text-align: center;

}

canvas {

width: 100%;

height: 100%;

}

只是用CSS定义了画布canvas的尺寸，那么火焰燃烧的效果是怎么来的呢？下面就要看Javascript的作用了。

Javascript代码：

$( document ).ready(function() {

// Set canvas drawing surface

var space = document.getElementById("surface");

var surface = space.getContext("2d");

surface.scale(1,1);

// Set Particles

var particles = [];

var particle_count = 150;

for(var i = 0; i < particle_count; i++) {

particles.push(new particle());

}

var time = 0;

// Set wrapper and canvas items size

var canvasWidth=320;

var canvasHeight=480;

$(".wrapper").css({width:canvasWidth,height:canvasHeight});

$("#surface").css({width:canvasWidth,height:canvasHeight});

// shim layer with setTimeout fallback from Paul Irish

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 6000 / 60);

};

})();

function particle() {

this.speed = {x: -1+Math.random()*2, y: -5+Math.random()*5};

canvasWidth = (document.getElementById("surface").width);

canvasHeight= (document.getElementById("surface").height);

this.location = {x: canvasWidth/2, y: (canvasHeight/2)+35};

this.radius = .5+Math.random()*1;

this.life = 10+Math.random()*10;

this.death = this.life;

this.r = 255;

this.g = Math.round(Math.random()*155);

this.b = 0;

}

function ParticleAnimation(){

surface.globalCompositeOperation = "source-over";

surface.fillStyle = "black";

surface.fillRect(0, 0, canvasWidth, canvasHeight);

surface.globalCompositeOperation = "lighter";

for(var i = 0; i < particles.length; i++)

{

var p = particles[i];

surface.beginPath();

p.opacity = Math.round(p.death/p.life*100)/100

var gradient = surface.createRadialGradient(p.location.x, p.location.y, 0, p.location.x, p.location.y, p.radius);

gradient.addColorStop(0, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");

gradient.addColorStop(0.5, "rgba("+p.r+", "+p.g+", "+p.b+", "+p.opacity+")");

gradient.addColorStop(1, "rgba("+p.r+", "+p.g+", "+p.b+", 0)");

surface.fillStyle = gradient;

surface.arc(p.location.x, p.location.y, p.radius, Math.PI*2, false);

surface.fill();

p.death--;

p.radius++;

p.location.x += (p.speed.x);

p.location.y += (p.speed.y);

//regenerate particles

if(p.death < 0 || p.radius < 0){

//a brand new particle replacing the dead one

particles[i] = new particle();

}

}

requestAnimFrame(ParticleAnimation);

}

ParticleAnimation();

});

很显然，这已经封装成一个