3D动态烟花--HTML

最新推荐文章于 2024-04-15 01:54:12 发布

这个程序员不太冷

最新推荐文章于 2024-04-15 01:54:12 发布

阅读量1.2k

点赞数 1

分类专栏：前端编程网页设计

本文链接：https://blog.csdn.net/h471507602/article/details/111995744

版权

写代码无聊了，要为自己找一些有意思的事情去做嘛，顺便也可以在小白面前装一下下。这是一个3D烟花动态图，用H5写的。

使用方法：

在电脑上创建一个文本文档，将下面的代码复制上去，然后将文本扩展名改为html（例如：3D烟花.html) ，然后该文件就会变成网页的图标。点击运行就行了，IE浏览器可能无法运行，可能只会出来黑屏，不过我使用的win10系统的Microsoft Edge可以出来。如果不行，请使用火狐浏览器。

效果图如下：（此图片是静态的，程序运行出来是动态的)

代码如下：

<!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);<

最低0.47元/天解锁文章

这个程序员不太冷

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
3D动态烟花--HTML

写代码无聊了，要为自己找一些有意思的事情去做嘛，顺便也可以在小白面前装一下下。这是一个3D烟花动态图，用H5写的。使用方法：在电脑上创建一个文本文档，将下面的代码复制上去，然后将文本扩展名改为html（例如：3D烟花.html) ，然后该文件就会变成网页的图标。点击运行就行了，IE浏览器可能无法运行，可能只会出来黑屏，不过我使用的win10系统的Microsoft Edge可以出来。如果不行，请使用火狐浏览器。效果图如下：（此图片是静态的，程序运行出来是动态的)代码如下：<!.
复制链接

扫一扫