<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{padding:0; margin: 0;}
#canvas{display: block; background-color: black;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//1.获取屏幕宽高,
//2.定义圆函数,将它放置数量里
//3.存放随机变量值 ,创建attr 存放随机变量值;
//4.重新绘制圆.然后判断宽高,速度随机;
//5.定义多一个for循环 j 循环判定距离 //距离 x座标减去另一个x座标的平方 + y座标减去另一个y座标的平方 =根号 然后连线
//6.用数组存放鼠标位置,在for循环第一层判断是否有鼠标进入,如果有就产生一个原点,并判断距离,
var canvas =document.getElementById("canvas");
var cxt=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var w=canvas.width;
var h=canvas.height;
var mun=250;
var attr=[];
var move={};
document.οnmοusemοve=function(e){
move.x=e.pageX;
move.y=e.pageY;
};
for(var i=0; i<mun; i++)
{
attr[i]={ x:Math.random()*w, y:Math.random()*h, Cw:Math.random()*3-0.5, Cx:Math.random()*3-0.5 };
Creen(attr[i].x,attr[i].y)
}
function Creen(x,y){
cxt.save();
cxt.beginPath();
cxt.arc( x, y, 10, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fillStyle = 'white';
cxt.fill();
cxt.restore();
}
function anew(){
cxt.save();
cxt.beginPath();
cxt.clearRect(0,0,w,h);
for(var i=0; i<mun; i++)
{
attr[i].x+=attr[i].Cw;
attr[i].y+=attr[i].Cx;
Creen(attr[i].x,attr[i].y);
if(attr[i].x>=w||attr[i].x<=0) attr[i].Cw=-attr[i].Cw;
if(attr[i].y>=w||attr[i].y<=0) attr[i].Cx=-attr[i].Cx;
for(var j=0; j<mun; j++)
{
if((attr[i].x-attr[j].x)*(attr[i].x-attr[j].x)+(attr[i].y-attr[j].y)*(attr[i].y-attr[j].y)<=50*50)
{
stok(attr[i].x,attr[i].y,attr[j].x,attr[j].y,false)
}
}
if(move)
{
if((attr[i].x-move.x)*(attr[i].x-move.x)+(attr[i].y-move.y)*(attr[i].y-move.y)<=80*80)
{
stok(attr[i].x,attr[i].y,move.x,move.y,true)
}
}
}
function stok(x1,y1,x2,y2,is){
if(is)
{
var grad = cxt.createLinearGradient(0,0, 0,140);
grad.addColorStop(0,'rgb(192, 80, 77)');
grad.addColorStop(1,'rgb(128, 100, 162)');
cxt.lineWidth = 1;
cxt.strokeStyle=grad;
}
else{
cxt.strokeStyle="white";
}
cxt.save();
cxt.moveTo(x1, y1);
cxt.lineTo(x2,y2);
cxt.lineWidth="3";
cxt.stroke();
cxt.restore();
}
cxt.restore();
requestAnimationFrame(anew)
}
requestAnimationFrame(anew)
</script>
</body>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
*{padding:0; margin: 0;}
#canvas{display: block; background-color: black;}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
//1.获取屏幕宽高,
//2.定义圆函数,将它放置数量里
//3.存放随机变量值 ,创建attr 存放随机变量值;
//4.重新绘制圆.然后判断宽高,速度随机;
//5.定义多一个for循环 j 循环判定距离 //距离 x座标减去另一个x座标的平方 + y座标减去另一个y座标的平方 =根号 然后连线
//6.用数组存放鼠标位置,在for循环第一层判断是否有鼠标进入,如果有就产生一个原点,并判断距离,
var canvas =document.getElementById("canvas");
var cxt=canvas.getContext("2d");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
var w=canvas.width;
var h=canvas.height;
var mun=250;
var attr=[];
var move={};
document.οnmοusemοve=function(e){
move.x=e.pageX;
move.y=e.pageY;
};
for(var i=0; i<mun; i++)
{
attr[i]={ x:Math.random()*w, y:Math.random()*h, Cw:Math.random()*3-0.5, Cx:Math.random()*3-0.5 };
Creen(attr[i].x,attr[i].y)
}
function Creen(x,y){
cxt.save();
cxt.beginPath();
cxt.arc( x, y, 10, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fillStyle = 'white';
cxt.fill();
cxt.restore();
}
function anew(){
cxt.save();
cxt.beginPath();
cxt.clearRect(0,0,w,h);
for(var i=0; i<mun; i++)
{
attr[i].x+=attr[i].Cw;
attr[i].y+=attr[i].Cx;
Creen(attr[i].x,attr[i].y);
if(attr[i].x>=w||attr[i].x<=0) attr[i].Cw=-attr[i].Cw;
if(attr[i].y>=w||attr[i].y<=0) attr[i].Cx=-attr[i].Cx;
for(var j=0; j<mun; j++)
{
if((attr[i].x-attr[j].x)*(attr[i].x-attr[j].x)+(attr[i].y-attr[j].y)*(attr[i].y-attr[j].y)<=50*50)
{
stok(attr[i].x,attr[i].y,attr[j].x,attr[j].y,false)
}
}
if(move)
{
if((attr[i].x-move.x)*(attr[i].x-move.x)+(attr[i].y-move.y)*(attr[i].y-move.y)<=80*80)
{
stok(attr[i].x,attr[i].y,move.x,move.y,true)
}
}
}
function stok(x1,y1,x2,y2,is){
if(is)
{
var grad = cxt.createLinearGradient(0,0, 0,140);
grad.addColorStop(0,'rgb(192, 80, 77)');
grad.addColorStop(1,'rgb(128, 100, 162)');
cxt.lineWidth = 1;
cxt.strokeStyle=grad;
}
else{
cxt.strokeStyle="white";
}
cxt.save();
cxt.moveTo(x1, y1);
cxt.lineTo(x2,y2);
cxt.lineWidth="3";
cxt.stroke();
cxt.restore();
}
cxt.restore();
requestAnimationFrame(anew)
}
requestAnimationFrame(anew)
</script>
</body>
</html>
