js用canvas实现简单的粒子运动
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #canvas{ background:#000; } </style> </head> <body> <canvas id="canvas"></canvas> </body> </html> <script> var canvas=document.getElementById("canvas"); var ctx = canvas.getContext(‘2d‘); var WHeight=document.body.offsetHeight; var WWidth=document.body.offsetWidth ; canvas.width=WWidth; canvas.height=WHeight; var Number=1200; //控制粒子的个数 var Data=[]; Dataarc() //多个圆 function Dataarc() { for(var i=0;i<Number;i++) { Data[i]={ x:~~(Math.random()*WWidth), y:~~(Math.random()*WHeight), px:Math.random()*2, py: Math.random()*2 } console.log(Data); arc(Data[i].x, Data[i].y); } } function arc(x,y) //画圆 { ctx.save(); ctx.beginPath(); ctx.fill;//填充颜色,默认是黑色 ctx.arc(x,y,2,0,2*Math.PI,false); ctx.fill(); ctx.stroke(); } function line(x1,y1,x2,y2) //连线的线段 { ctx.save(); var linear=ctx.createLinearGradient(x1,y1,x2,y2); linear.addColorStop( 0, ‘red‘ ); linear.addColorStop( 1, ‘blue‘ ); ctx.lineWidth=1.5; ctx.strokeStyle = linear; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.closePath(); ctx.lineTo(x2, y2); ctx.stroke(); ctx.restore(); } function Motion() //控制粒子的运动和判断连线条件 { ctx.clearRect(0,0,WWidth,WHeight); if(Data!="") { for(var i=0;i<Number;i++) { if(Data[i].x<=0 ||Data[i].x>=WWidth) { Data[i].px=-Data[i].px; } if( Data[i].y>=WHeight||Data[i].y<=0) { Data[i].py=-Data[i].py; } Data[i].x=~~(Data[i].x)-~~(Data[i].px); Data[i].y=~~(Data[i].y)+~~(Data[i].py); arc(Data[i].x, Data[i].y); for(var j=i+1;j<Number;j++) { if(Math.pow(Data[i].x- Data[j].x,2)+Math.pow(Data[i].y-Data[j].y,2<2000) { line(Data[i].x,Data[i].y,Data[j].x,Data[j].y); } } } } } setInterval("Motion()","200"); //定时调用，让粒子运动 </script>
在写下合格粒子运动时要先清楚你的思路，不能一开始就盲目的开始写，首先先要确定思路然后在去一步步的实现，在写的过程要注意细节，要思考js有些知识是跟数学知识相关的要注意观察
1要创建一个画布
2要创建粒子
3让粒子能够运动起来: 粒子运动不是粒子真正的在动，而是不断的重画
4判断粒子勾成连线的条件(用勾股定理)
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
