html 3D烟花

最新推荐文章于 2023-01-11 15:20:53 发布

VIP文章一只w.

最新推荐文章于 2023-01-11 15:20:53 发布

阅读量687

点赞数 1

分类专栏：抖音文章标签： html 3d javascript

本文链接：https://blog.csdn.net/m0_73309780/article/details/128321597

版权

新建空白文本文档，复制粘贴

<!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)*(rx1-rx3))/uc;
   var ub=((rx2-rx1)*(ry1-ry3)-(ry2-ry1)*(rx1-rx3))/uc;
   if(!z)z=.000000001;
   if(ua>0&&ua<1&&ub>0&&ub<1){
       return {<