今天小编给大家分享一下怎么在html5中显示波浪花环效果的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

新建一个html文档(新建一个txt文本文档，把后缀名改为 .html

以记事本打开，把复制好的代码粘贴进去，“ 保存 ”，退出，双击或右键选择浏览器打开。

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Document</title><style>body{background:#111;padding:0;margin:0;overflow:hidden;}</style></head><body><divid="wrapper"></div></body><script>(function(){'usestrict';letwrapper,canvas,ctx,width,height,Tau=Math.PI*2,PI180=Math.PI/180,systems=[];/*PlanetarySystem*/letPlanetarySystem=function(id='pSys'){Object.defineProperty(this,'id',{value:id,writable:true});Object.defineProperty(this,'x',{value:0,writable:true});Object.defineProperty(this,'y',{value:0,writable:true});Object.defineProperty(this,'allBodies',{value:[],writable:true});Object.defineProperty(this,'allBodiesLookup',{value:{},writable:true});//fastidlookupforchildrenObject.defineProperty(this,'numBodies',{value:0,writable:true});}PlanetarySystem.prototype.addBody=function(vo){vo.parentSystem=this;vo.parentBody=vo.parentBody===null?this:this.allBodiesLookup[vo.parentBody];letbody=newPlanetaryBody(vo);body.update();this.allBodies.push(body);this.allBodiesLookup[vo.id]=body;this.numBodies+=1;}PlanetarySystem.prototype.setSpeedFactor=function(value){letbody;for(leti=0;i<this.numBodies;i++){body=this.allBodies[i];body.setSpeedFactor(value);}}PlanetarySystem.prototype.update=function(){letbody;for(leti=0;i<this.numBodies;i++){body=this.allBodies[i];body.update();}}/*PlanetaryBody*/letPlanetaryBody=function(vo){Object.defineProperty(this,'id',{value:vo.id,writable:true});Object.defineProperty(this,'diameter',{value:vo.diameter,writable:true});Object.defineProperty(this,'colour',{value:vo.colour,writable:true});Object.defineProperty(this,'x',{value:0,writable:true});Object.defineProperty(this,'y',{value:0,writable:true});Object.defineProperty(this,'vx',{value:0,writable:true});Object.defineProperty(this,'vy',{value:0,writable:true});Object.defineProperty(this,'degrees',{value:vo.degrees,writable:true});Object.defineProperty(this,'speedBase',{value:vo.speed,writable:true});Object.defineProperty(this,'speed',{value:vo.speed,writable:true});Object.defineProperty(this,'orbitalRadius',{value:vo.orbitalRadius,writable:true});Object.defineProperty(this,'parentSystem',{value:vo.parentSystem,writable:true});Object.defineProperty(this,'parentBody',{value:vo.parentBody,writable:true});returnthis;}PlanetaryBody.prototype.update=function(){letangle=this.degrees*PI180;this.degrees+=this.speed;this.vx=this.orbitalRadius*Math.cos(angle);this.vy=this.orbitalRadius*Math.sin(angle);//updatepositionif(this.parentBody!=null){this.x=this.vx+this.parentBody.x;this.y=this.vy+this.parentBody.y;}}/*init()*/functioninit(){wrapper=document.querySelector('#wrapper');canvas=createCanvas('canvas',width,height);wrapper.appendChild(canvas);ctx=canvas.getContext('2d');setupEvents();resizeCanvas();/*DefinenewPlanetarySystemandsetvalues*/letsystem1=newPlanetarySystem('pSys1');systems.push(system1);system1.x=width*.5;system1.y=height*.5;system1.addBody({id:'sun',diameter:5,degrees:0,speed:0,colour:'#FDFE1D',orbitalRadius:0,parentBody:null});for(letloop=30,i=0;i<loop;i+=1){system1.addBody({id:'ball'+i,diameter:5,degrees:0,speed:2+(loop*0.15)-(i*0.2),colour:'#FDFE1D',orbitalRadius:7*(i+1),parentBody:'sun'});}}/*Methods*/functioncreateCanvas(id,w,h){lettCanvas=document.createElement('canvas');tCanvas.width=w;tCanvas.height=h;tCanvas.id=id;returntCanvas;}functionsetupEvents(){window.onresize=resizeCanvas;}functionresizeCanvas(){letrect=wrapper.getBoundingClientRect();width=window.innerWidth;height=window.innerHeight-rect.top-2;canvas.width=width;canvas.height=height;for(leti=0;i<systems.length;i++){systems[i].x=width*.5;systems[i].y=height*.5;}}functionupdate(){for(letloop=systems.length,i=0;i<loop;i++){systems[i].update();}}functiondraw(){letsystem;letprev=null;for(leti=0;i<systems.length;i++){system=systems[i];letplanetaryBody;for(letloop=system.numBodies,j=1;j<loop;j+=1){planetaryBody=system.allBodies[j];ctx.beginPath();ctx.arc(planetaryBody.x,planetaryBody.y,planetaryBody.diameter,0,Tau,false);ctx.fillStyle=planetaryBody.colour;ctx.fill();if(j>1){ctx.strokeStyle=planetaryBody.colour;ctx.lineWidth=2;ctx.beginPath();ctx.moveTo(planetaryBody.x,planetaryBody.y);ctx.lineTo(prev.x,prev.y);ctx.stroke();}prev={x:planetaryBody.x,y:planetaryBody.y};}}}functionanimate(){ctx.fillStyle='rgba(0,0,0,.05)';ctx.fillRect(0,0,width,height);update();draw();requestAnimationFrame(animate);}init();animate();}());</script></html>

以上就是“怎么在html5中显示波浪花环效果”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。