程序员每日一乐：html动态烟花设计 3D |
您所在的位置：网站首页 › html心形动画代码 › 程序员每日一乐：html动态烟花设计 3D |
|
经过一天的的工作或者学习是否感到枯燥乏味？现在的你是否想找些乐子？下面我将教大家制作简单易做的3D烟花动态网页，告别无聊与乏味。。。。。
第一步：首先新建一个文本文档。 第二步：将以下代码复制到该文本文档中，保存。 3D烟花 html,body{ margin:0px; width:100%; height:100%; overflow:hidden; background:#000; } #canvas{ width:100%; height:100%; } 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;i0&&ua0&&ub9){ 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=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();
第三步：将文本扩展名txt改为html，打开网页即可展示烟花效果。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |