html动态烟花

最新推荐文章于 2024-07-03 17:41:41 发布

尕聪明

最新推荐文章于 2024-07-03 17:41:41 发布

阅读量4.6k

点赞数 10

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43250197/article/details/107875444

版权

这篇博客详细介绍了如何使用HTML5 Canvas结合JavaScript来创建绚丽的动态烟花展示。通过编程实现烟花升空、爆炸和散落的效果，为网页增添视觉吸引力。

摘要由CSDN通过智能技术生成

在这里插入图片描述

  <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    <meta charset="utf-8">
    <title>3D烟花</title>
    
    <style>
    html,body{
    	margin:0px;
    	width:100%;
    	height:100%;
    	overflow:hidden;
    	background:#000;
    }
    
    #canvas{
    	width:100%;
    	height:100%;
    }
    </style>
    </head>
    	
    	<body>
    <canvas id="canvas" width="825" height="631"></canvas><script>
    function initVars(){
    
    	pi=Math.PI;
    	ctx=canvas.getContext("2d");
    	canvas.width=canvas.clientWidth;
    	canvas.height=canvas.clientHeight;
    	cx=canvas.width/2;
    	cy=canvas.height/2;
    	playerZ=-25;
    	playerX=playerY=playerVX=playerVY=playerVZ=pitch=yaw=pitchV=yawV=0;
    	scale=600;
    	seedTimer=0;seedInterval=5,seedLife=100;gravity=.02;
    	seeds=new Array();
    	sparkPics=new Array();
    	s="https://cantelope.org/NYE/";
    	for(i=1;i<=10;++i){
    		sparkPic=new Image();
    		sparkPic.src=s+"spark"+i+".png";
    		sparkPics.push(sparkPic);
    	}
    	sparks=new Array();
    	pow1=new Audio(s+"pow1.ogg");
    	pow2=new Audio(s+"pow2.ogg");
    	pow3=new Audio(s+"pow3.ogg");
    	pow4=new Audio(s+"pow4.ogg");
    	frames = 0;
    }
    
    function rasterizePoint(x,y,z){
    
    	var p,d;
    	x-=playerX;
    	y-=playerY;
    	z-=playerZ;
    	p=Math.atan2(x,z);
    	d=Math.sqrt(x*x+z*z);
    	x=Math.sin(p-yaw)*d;
    	z=Math.cos(p-yaw)*d;
    	p=Math.atan2(y,z);
    	d=Math.sqrt(y*y+z*z);
    	y=Math.sin(p-pitch)*d;
    	z=Math.cos(p-pitch)*d;