烟花（动态html）

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

一只小猿猿啊

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

阅读量644

点赞数

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

本文链接：https://blog.csdn.net/weixin_48553717/article/details/122347140

版权

这个HTML代码创建了一个3D烟花爆炸效果的网页动画。通过JavaScript和Canvas元素，实现了粒子系统的烟花模拟，包括烟花发射、上升、爆炸以及火花飞溅的视觉效果。页面背景为黑色，烟花颜色鲜艳，随着角度和距离的变化，粒子大小和透明度也会相应调整，营造出逼真的烟花秀场景。

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

新建文本文档，复制粘贴代码，更改后缀名为html。

<!doctype html>
<html>
<head>
<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"></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=