h5 canvas+js实现烟花效果

最新推荐文章于 2025-05-22 16:23:34 发布

最强面试者

最新推荐文章于 2025-05-22 16:23:34 发布

阅读量6.1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：代码积累

本文链接：https://blog.youkuaiyun.com/gao123ming/article/details/79212907

本文介绍了如何使用HTML5的Canvas和JavaScript技术制作逼真的烟花爆炸效果。程序员通过模拟烟花爆炸的细节，如烟花粒子的运动轨迹和消失过程，实现了从爆炸到消失的渐变效果。关键代码展示了实现这一效果的技术要点。

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

又快过年了，作为一名程序员，我想用自己的方式祝大家新年快乐，下图是移动端访问截图，pc端也可以访问,点击图片预览效果

这个效果是用h5的canvas+js实现的，主要技术点是如何实现一个烟花爆炸的模型，而不是如何绘制出图形图像，例如，为了逼真的模拟烟花爆炸过程中的细节，我们会发现烟花爆炸后的各个方向上运动的烟火都会有一个“尾巴”，从爆炸到烟花的消失，是一个渐变的过程，不是一下子就消失了，爆炸时，中心到爆炸边缘的粒子运动是一个口向下的二次函数。

以下是关键代码：

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"  />
<script type="text/javascript" src="jquery.min.js"></script>
<style>
body{
	margin:0px;
	padding:0px;
}
html{
	margin:0px;
	padding:0px;
}
</style>
<script>
var screeWidth;
var screeHeight;
var img;
var my_canvas; 
var context;  

var size = 3;
//弧度常量
var  radis = Math.PI /180;
//精灵粒子,全局的
var spriteArray = new Array();
//创建烟花队列
var gloablYanhuaArray = new  Array();
gloablYanhuaArray.push( YANHUAOBJ(800,400,50,size,0));
gloablYanhuaArray.push( YANHUAOBJ(200,400,50,size,1));
//gloablYanhuaArray.push( YANHUAOBJ(400,400,50,size));

$(function() { 
	img = document.getElementById("tulip"); 
	my_canvas=$("#myCanvas");   
	screeWidth = window.innerWidth;
	screeHeight = window.innerHeight;
	$("#myCanvas").attr("width",screeWidth);
	$("#myCanvas").attr("height",screeHeight);
	my_canvas=my_canvas[0];
	context=my_canvas.getContext("2d");  
	setInterval("draw()",80);
	setInterval("explod()",500);
	window.addEventListener( 'resize', onWindowResize, false );
    });  
function onWindowResize(){
	alert(1);
}
function clearg(){
	for(var i = 0; i< gloablYanhuaArray.length;i++){
		if(gloablYanhuaArray[i].dead){
			gloablYanhuaArray.splice(i,1);
		}
	}
}
function draw(){
	//console.log("精灵总数："+spriteArray.length+",大烟花："+gloablYanhuaArray.length);
	clearg();
	context.clearRect(0,0,my_canvas.width,my_canvas.height);
	context.fillStyle   = "#fff";;
	context.fillText("当前烟花数："+gloablYanhuaArray.length+",当前粒子数："+spriteArray.length,100,100);
	contex