<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.fillStyle="#fff";//填充颜色,默认是黑色 ?????????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让粒子能够运动起来
粒子运动不是粒子真正的在动，而是不断的重画
3判断粒子勾成连线的条件(用勾股定理)
js用canvans 实现简单的粒子运动
原文地址：https://www.cnblogs.com/Dainney/p/10415908.html