做了个爆炸的奇效,基于HTML5的canvas
日期：2014-05-17 浏览次数：20858 次
做了个爆炸的特效,基于HTML5的canvas
截图
?
?
不废话了,上代码
?
?
<!DOCTYPE html>
<html>
<head>
<title>爆炸效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<canvas id="canvasTest" width="640px" height="480px"></canvas>
<script>
var booms={};
window.onload = function() {
draw();
}
function draw() {
var canvas = document.getElementById('canvasTest');
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.clearRect(0,0,640,480);
context.save();
context.translate(300,300);
var rg = context.createRadialGradient(0, 0, 0, 100,0,100);
rg.addColorStop(0, '#ff0');
rg.addColorStop(1, '#f00');
context.lineCap = "round";
context.strokeStyle=rg;
for(var i=1;i<20;i++){
if(booms[i] && booms[i].id){
spread(booms[i]);
}else{
var start=random(5,15);
var height=random(5,25);
var angle=random(10,360);
var width=random(1,3);
booms[i]=new boom(i,context,start,height,angle,width);
}
drawLine(booms[i]);
}
context.restore();
setTimeout(draw,50);
}
function spread(boom){
boom.start+=5;
if(boom.height>3){
boom.height-=3;
boom.angle+=1;
}
}
function boom(id,ctx,start,height,angle,width){
this.id=id;
this.ctx=ctx;
this.start=start;
this.height=height;
this.angle=angle;
this.width=width;
this.maxheight=3*(start+height);
}
function drawLine(boom){
if(boom.start+boom.height<boom.maxheight){
boom.ctx.lineWidth = boom.width;
boom.ctx.save();
boom.ctx.rotate(Math.PI*2/360*boom.angle)
boom.ctx.beginPath();
boom.ctx.moveTo(boom.start,0);
boom.ctx.lineTo(boom.start+boom.height,0)
boom.ctx.stroke();
boom.ctx.restore();
}
}
function random(start, end) {
return Math.round(Math.random() * (end - start) + start);
}
</script>
</body>
</html>
?
先移动原点坐标到300,300. 随机分布20个爆炸碎片, 用渐变线表示. 长度为0,100的渐变线,由黄变红.
分配起始点start,画线长度height,角度angle,线粗width.
在spread中,画线完成后每帧刷新步长为5, 线长每次减3直到少于3.角度稍微变化.
maxheight为最大总长,超过此长度则不再绘画.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
