js用canvans 实现简单的粒子运动
<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判断粒子勾成连线的条件(用勾股定理)
