canvas 雪花连线

最新推荐文章于 2019-10-26 08:56:10 发布

对酒丶当歌

最新推荐文章于 2019-10-26 08:56:10 发布

阅读量250

点赞数

分类专栏： Html5 文章标签： canvas 连线雪花

本文链接：https://blog.csdn.net/qq_37133856/article/details/71105632

版权

Html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

对酒丶当歌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
canvas 雪花连线

*{padding:0; margin: 0;}#canvas{display: block; background-color: black;} //1.获取屏幕宽高, //2.定义圆函数,将它放置数量里 //3.存放随机变量值 ,创建attr 存放随机变量值; //4.重新绘制圆.然后判断宽高,速度随机; //5.定义多一个for循环
复制链接

扫一扫