星星连线

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#myCanvas {
background-color: black;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// 获取视口宽高
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
// 定义星星间隔
var size = 130;
// 定义画布大小
myCanvas.width = width;
myCanvas.height = height;
// 定义星星与线的样式
ctx.fillStyle = "white";
ctx.strokeStyle = "rgba(255,255,0,.5)";
// 星星类
var Star = function(x, y, r, x_speed, y_speed){
this.x = x;
this.y = y;
this.r = r;
this.x_speed = x_speed;
this.y_speed = y_speed;
}
// 星星移动方法
Star.prototype.move = function(){
this.x += this.x_speed;
this.y += this.y_speed;
}
Star.prototype.backX = function(){
this.x_speed = - this.x_speed;
}
Star.prototype.backY = function(){
this.y_speed = - this.y_speed;
}
// 鼠标移动星星
var star = new Star(0, 0, parseInt(Math.random() * 6), 0, 0);
// 定义数组放置每一个星星
var arr = [star];
// 实例化星星并放入数组中
for(var i = 0; i < 150; i++){
var star1 = new Star(parseInt(Math.random() * width), parseInt(Math.random() * height), parseInt(Math.random() * 4), (parseInt(Math.random() * 4) + 1) * (Math.pow(-1, parseInt(Math.random() * 4))), (parseInt(Math.random() * 4) + 1) * (Math.pow(-1, parseInt(Math.random() * 4))));
arr.push(star1)
}
// 鼠标移动星星跟随
myCanvas.onmousemove = function(e){
var x = e.clientX;
var y = e.clientY;
arr[0].x = x;
arr[0].y = y;
}
// 鼠标点击生成星星
myCanvas.onclick = function(e){
var x = e.clientX;
var y = e.clientY;
// 防止星星过多
if(arr.length >= 150){
for(var i = 0; i < 6; i++){
arr.shift();
}
}
for(var i = 0; i < 5; i++){
arr.push(new Star(x, y, parseInt(Math.random() * 4), (parseInt(Math.random() * 4) + 1) * (Math.pow(-1,parseInt(Math.random() * 4))),(parseInt(Math.random() * 4) + 1) * (Math.pow(-1, parseInt(Math.random() * 4)))));
}
}
// 生成星星星星移动
setInterval(function(){
ctx.clearRect(0,0,10000,10000);
for(var i = 0; i < arr.length; i++){
ctx.beginPath();
ctx.arc(arr[i].x, arr[i].y, arr[i].r, 0, Math.PI * 2, false);
arr[i].move();
if(arr[i].x >= width || arr[i].x <= 0){
arr[i].backX();
}
if(arr[i].y >= height || arr[i].y <= 0){
arr[i].backY();
}

ctx.fill();
ctx.closePath();
}
// 连线
for(var i = 0; i < arr.length; i++){
var star = arr[i];
for(var j = i + 1; j < arr.length; j++){
if(Math.abs(star.x - arr[j].x) < size && Math.abs(star.y - arr[j].y) < size){
line(star.x, star.y, arr[j].x, arr[j].y)
}
}
}
},30)
// 生成连线函数
function line(x, y, x1, y1) {
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x1, y1);
ctx.closePath();
ctx.lineWidth = 0.4;
ctx.stroke();
}
</script>
</body>
</html>

猜你喜欢