html 实现烟花

最新推荐文章于 2024-05-07 12:49:12 发布

头发快掉没了的程序猿

最新推荐文章于 2024-05-07 12:49:12 发布

阅读量4.8k

点赞数 3

文章标签： html css vue.js

本文链接：https://blog.csdn.net/LiuBo_1999/article/details/122706085

版权

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>烟花动画特效</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=0,ry3=0,rx4=x,ry4=z,uc=(ry4-ry3)*(rx2-rx1)-(rx4-rx3)*(ry2-ry1);
	if(!uc) return {x:0,y:0,d:-1};
	var ua=((rx4-rx3)*(ry1-ry3)-(ry4-ry3)*

最低0.47元/天解锁文章

头发快掉没了的程序猿

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
3
评论
html 实现烟花

<!doctype html><html><head><meta charset="utf-8"><title>烟花动画特效</title> <style>html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000;} #canvas{ width:100%; height:100%;}.
复制链接

扫一扫

html 实现烟花

“相关推荐”对你有帮助么？