首頁 > 軟體

html+JavaScript煙花3D簡單特效（親測可用）

2023-01-04 14:00:26

網頁煙花特效方便使用，更能給養眼享受，複製黏貼就能使用，快來試試吧。這篇文章主要介紹了html+JavaScript煙花3D特效（親測可用）,需要的朋友可以參考下

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</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 {
      x:cx+(rx1+ua*(rx2-rx1))*scale,
      y:cy+y/z*scale,
      d:Math.sqrt(x*x+y*y+z*z)
    };
  }else{
    return {
      x:cx+(rx1+ua*(rx2-rx1))*scale,
      y:cy+y/z*scale,
      d:-1
    };
  }
}

function spawnSeed(){
  
  seed=new Object();
  seed.x=-50+Math.random()*100;
  seed.y=25;
  seed.z=-50+Math.random()*100;
  seed.vx=.1-Math.random()*.2;
  seed.vy=-1.5;//*(1+Math.random()/2);
  seed.vz=.1-Math.random()*.2;
  seed.born=frames;
  seeds.push(seed);
}

function splode(x,y,z){
  
  t=5+parseInt(Math.random()*150);
  sparkV=1+Math.random()*2.5;
  type=parseInt(Math.random()*3);
  switch(type){
    case 0:
      pic1=parseInt(Math.random()*10);
      break;
    case 1:
      pic1=parseInt(Math.random()*10);
      do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
      break;
    case 2:
      pic1=parseInt(Math.random()*10);
      do{ pic2=parseInt(Math.random()*10); }while(pic2==pic1);
      do{ pic3=parseInt(Math.random()*10); }while(pic3==pic1 || pic3==pic2);
      break;
  }
  for(m=1;m<t;++m){
    spark=new Object();
    spark.x=x; spark.y=y; spark.z=z;
    p1=pi*2*Math.random();
    p2=pi*Math.random();
    v=sparkV*(1+Math.random()/6)
    spark.vx=Math.sin(p1)*Math.sin(p2)*v;
    spark.vz=Math.cos(p1)*Math.sin(p2)*v;
    spark.vy=Math.cos(p2)*v;
    switch(type){
      case 0: spark.img=sparkPics[pic1]; break;
      case 1:
        spark.img=sparkPics[parseInt(Math.random()*2)?pic1:pic2];
        break;
      case 2:
        switch(parseInt(Math.random()*3)){
          case 0: spark.img=sparkPics[pic1]; break;
          case 1: spark.img=sparkPics[pic2]; break;
          case 2: spark.img=sparkPics[pic3]; break;
        }
        break;
    }
    spark.radius=25+Math.random()*50;
    spark.alpha=1;
    spark.trail=new Array();
    sparks.push(spark);
  }
  pow = new Audio(`${s}pow${~~(Math.random()*4)}.ogg`); 
  // switch(parseInt(Math.random()*4)){

  //   case 0: pow=new Audio(s+"pow1.ogg"); break;
  //   case 1: pow=new Audio(s+"pow2.ogg"); break;
  //   case 2: pow=new Audio(s+"pow3.ogg"); break;
  //   case 3: pow=new Audio(s+"pow4.ogg"); break;
  // }
  d=Math.sqrt((x-playerX)*(x-playerX)+(y-playerY)*(y-playerY)+(z-playerZ)*(z-playerZ));
  pow.volume=1.5/(1+d/10);
  pow.play();
}

function doLogic(){
  
  if(seedTimer<frames){
    seedTimer=frames+seedInterval*Math.random()*10;
    spawnSeed();
  }
  for(i=0;i<seeds.length;++i){
    seeds[i].vy+=gravity;
    seeds[i].x+=seeds[i].vx;
    seeds[i].y+=seeds[i].vy;
    seeds[i].z+=seeds[i].vz;
    if(frames-seeds[i].born>seedLife){
      splode(seeds[i].x,seeds[i].y,seeds[i].z);
      seeds.splice(i,1);
    }
  }
  for(i=0;i<sparks.length;++i){
    if(sparks[i].alpha>0 && sparks[i].radius>5){
      sparks[i].alpha-=.01;
      sparks[i].radius/=1.02;
      sparks[i].vy+=gravity;
      point=new Object();
      point.x=sparks[i].x;
      point.y=sparks[i].y;
      point.z=sparks[i].z;
      if(sparks[i].trail.length){
        x=sparks[i].trail[sparks[i].trail.length-1].x;
        y=sparks[i].trail[sparks[i].trail.length-1].y;
        z=sparks[i].trail[sparks[i].trail.length-1].z;
        d=((point.x-x)*(point.x-x)+(point.y-y)*(point.y-y)+(point.z-z)*(point.z-z));
        if(d>9){
          sparks[i].trail.push(point);
        }
      }else{
        sparks[i].trail.push(point);
      }
      if(sparks[i].trail.length>5)sparks[i].trail.splice(0,1);        
      sparks[i].x+=sparks[i].vx;
      sparks[i].y+=sparks[i].vy;
      sparks[i].z+=sparks[i].vz;
      sparks[i].vx/=1.075;
      sparks[i].vy/=1.075;
      sparks[i].vz/=1.075;
    }else{
      sparks.splice(i,1);
    }
  }
  p=Math.atan2(playerX,playerZ);
  d=Math.sqrt(playerX*playerX+playerZ*playerZ);
  d+=Math.sin(frames/80)/1.25;
  t=Math.sin(frames/200)/40;
  playerX=Math.sin(p+t)*d;
  playerZ=Math.cos(p+t)*d;
  yaw=pi+p+t;
}

function rgb(col){
  
  var r = parseInt((.5+Math.sin(col)*.5)*16);
  var g = parseInt((.5+Math.cos(col)*.5)*16);
  var b = parseInt((.5-Math.sin(col)*.5)*16);
  return "#"+r.toString(16)+g.toString(16)+b.toString(16);
}

function draw(){
  
  ctx.clearRect(0,0,cx*2,cy*2);
  
  ctx.fillStyle="#ff8";
  for(i=-100;i<100;i+=3){
    for(j=-100;j<100;j+=4){
      x=i;z=j;y=25;
      point=rasterizePoint(x,y,z);
      if(point.d!=-1){
        size=250/(1+point.d);
        d = Math.sqrt(x * x + z * z);
        a = 0.75 - Math.pow(d / 100, 6) * 0.75;
        if(a>0){
          ctx.globalAlpha = a;
          ctx.fillRect(point.x-size/2,point.y-size/2,size,size);        
        }
      }
    }
  }
  ctx.globalAlpha=1;
  for(i=0;i<seeds.length;++i){
    point=rasterizePoint(seeds[i].x,seeds[i].y,seeds[i].z);
    if(point.d!=-1){
      size=200/(1+point.d);
      ctx.fillRect(point.x-size/2,point.y-size/2,size,size);
    }
  }
  point1=new Object();
  for(i=0;i<sparks.length;++i){
    point=rasterizePoint(sparks[i].x,sparks[i].y,sparks[i].z);
    if(point.d!=-1){
      size=sparks[i].radius*200/(1+point.d);
      if(sparks[i].alpha<0)sparks[i].alpha=0;
      if(sparks[i].trail.length){
        point1.x=point.x;
        point1.y=point.y;
        switch(sparks[i].img){
          case sparkPics[0]:ctx.strokeStyle="#f84";break;
          case sparkPics[1]:ctx.strokeStyle="#84f";break;
          case sparkPics[2]:ctx.strokeStyle="#8ff";break;
          case sparkPics[3]:ctx.strokeStyle="#fff";break;
          case sparkPics[4]:ctx.strokeStyle="#4f8";break;
          case sparkPics[5]:ctx.strokeStyle="#f44";break;
          case sparkPics[6]:ctx.strokeStyle="#f84";break;
          case sparkPics[7]:ctx.strokeStyle="#84f";break;
          case sparkPics[8]:ctx.strokeStyle="#fff";break;
          case sparkPics[9]:ctx.strokeStyle="#44f";break;
        }
        for(j=sparks[i].trail.length-1;j>=0;--j){
          point2=rasterizePoint(sparks[i].trail[j].x,sparks[i].trail[j].y,sparks[i].trail[j].z);
          if(point2.d!=-1){
            ctx.globalAlpha=j/sparks[i].trail.length*sparks[i].alpha/2;
            ctx.beginPath();
            ctx.moveTo(point1.x,point1.y);
            ctx.lineWidth=1+sparks[i].radius*10/(sparks[i].trail.length-j)/(1+point2.d);
            ctx.lineTo(point2.x,point2.y);
            ctx.stroke();
            point1.x=point2.x;
            point1.y=point2.y;
          }
        }
      }
      ctx.globalAlpha=sparks[i].alpha;
      ctx.drawImage(sparks[i].img,point.x-size/2,point.y-size/2,size,size);
    }
  }
}

function frame(){

  if(frames>100000){
    seedTimer=0;
    frames=0;
  }
  frames++;
  draw();
  doLogic();
  requestAnimationFrame(frame);
}

window.addEventListener("resize",()=>{
  canvas.width=canvas.clientWidth;
  canvas.height=canvas.clientHeight;
  cx=canvas.width/2;
  cy=canvas.height/2;
});

initVars();
frame();
</script>
</body>
</html>

到此這篇關於html+JavaScript煙花3D簡單特效（親測可用）的文章就介紹到這了,更多相關3D煙花特效內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com