烟花HTML特效

最新推荐文章于 2023-05-26 17:15:47 发布

依旧大白丶

最新推荐文章于 2023-05-26 17:15:47 发布

阅读量1.1w

点赞数 11

分类专栏：前端js 文章标签： html

本文链接：https://blog.csdn.net/weixin_44602430/article/details/120437212

版权

博主分享了18年创作的一款HTML烟花特效，适用于娱乐或哄小孩，直接展示代码实现。

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

HTML烟花特效

这是我18年写的一个烟花的特效,拿来骗骗小孩还是有点作用的,废话不多说直接上代码.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas 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"></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;
	var rx1=-1000,ry1=1,rx2=1000,ry2=1,rx3=