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

最新推荐文章于 2025-07-04 16:39:57 发布

十分钟年华老去

最新推荐文章于 2025-07-04 16:39:57 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： HTML5

本文链接：https://blog.youkuaiyun.com/zdsdiablo/article/details/84050191

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas创建动态的爆炸效果。通过设置随机参数，如起始位置、线条长度、角度和宽度等，实现逼真的视觉效果。采用径向渐变填充颜色从黄色过渡到红色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

截图

不废话了,上代码

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