HTML5 Canvas火焰效果 像火球发射一样

canvas是html5中非常重要而且有用的东西，我们可以在canvas上绘制任意的元素，就像你制作flash一样。今天我们就在canvas上来制作一款火焰发射的效果。就像古代的火球炮一样，而且可以在边缘反弹，感觉会比较屌。来看看效果图：

我们可以在这里查看火焰球的demo演示

当然，我们要来分析一下源代码，主要是一些js代码。

首先很简单地在页面上放一个canvas标签，并且给它点简单的样式：

<canvas></canvas>

复制代码

canvas{

position: absolute;

height: 100%;

width: 100%;

left: 0;

top: 0;

cursor: crosshair;

}

复制代码

接下来就来分析一下js代码。我们来逐步分解js。

由于这个是二维动画，所以我们利用canvas的getcontext方法来返回一个对象，这个对象包含我们对二维动画操作的api，代码如下：

canvas = document.querylector(‘canvas’);

ctx = canvas.getcontext(‘2d’);

下面我们来定义粒子：

复制代码

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

};

};

})();

复制代码

然后我们来定义火球：

复制代码

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

};

};

})();

复制代码

这里life表示火球的生命周期，下面我们可以看到，life值会随着火球发射力度的改变而改变。

接下来是定义鼠标拖动弹弓，准备发射火球：

复制代码

mou = {x:0,y:0,d:0};

onmoumove = function(e){

mou.x = e.clientx-o.x;

mou.y = e.clienty-o.y;

var 热电厂实习报告dx = mou.x – pos1.x,

dy = mou.y – pos1.y;

mou.d = math.sqrt(dx*dx+dy*dy);

};

charging = fal;

pos1 = {x:0,y:0};

showinstructions = true;

onmoudown = function(e){

pos1.x = mou.x;

pos1.y = mou.y;

charging = true;

showinstructions = fal;

};

onmouup = function(){

if(charging){

newfireball(

mou.x,

mou.y,

(pos1.x-mou.x)*0.03,

(pos1.y-mou.y)*0.03,

600

);

charging = fal;

}

};

复制代码

可以看到，当鼠标按键弹起时，新建一个火球，并初始化life值。

下面是火球运动时的动画执行代码，包括碰到浏览器边缘时的反射效果：

复制代码

t栗子煲鸡汤ime = 0;

requestanimationframe(loop = function(){

ctx.ttransform(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+mou.d/2);

ctx.strokestyle = ‘rgba(‘+c+’,’+c+’,’+c+’,1)’;

ctx.linewidth = 4;

ctx.beginpath();

ctx.moveto(pos1.x,pos1.y);

ctx.lineto(mou.x,mou.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;

}el if(time<80){

var x = (time-10)*2-70,

y = (time-10)-35,

r = 10,

a = 1;

}el if(time<90){

var x = 70,

y = 35,

r = 10+(time-80)*2,

a = 1-(time-80)/10;

}el 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.globalcompositeoperat爱毛反裘ion = ‘source-over’;

ctx.globalalpha = 1;

var c = math.floor(30+d/2);

ctx.strokestyle = ‘rgba(‘+c+’,’+c+’,’+c+’,1)’;

ctx.linewidth = 4;

ctx.beginpath();

ctx.moveto(pos1.x,pos1.y);

ctx.lineto(x,y);

ctx.linecap = ’round’;

ctx.stroke();

}

if(time<140){

ctx.globalcompositeoperation = ‘source-over’;

ctx.globalalpha = a;

ctx.beginpath();

ctx.arc(x,y,r,0,math.pi*2);

ctx.linewidth = 2;

ctx.strokestyle电子邮件的格式 = ‘#aaa’;

ctx.stroke();

}

if(time==80){

newfireball(

x,

y,

dx*0.03,

dy*0.03,

240

);

}

time = (time+1)%180;

}

ctx.globalcompositeoperation = ‘lighter’;

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;

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

}el if(f.x<(boundary = edge.left+7)){

f.x = boundary;

f.xv *= -1;

}

if(–f.life<0)delete fireballs[f.index];

}

requestanimationframe(loop);

});