做了个爆炸的特效,基于HTML5的canvas

zdsdiablo

浏览: 66139 次
性别:
来自: 珠海

最近访客更多访客>>

ysheng88

airyoureyes

cynix

jianli021

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML5

HTML5

截图

不废话了,上代码

<!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为最大总长,超过此长度则不再绘画.