canvas——鼠标移动附近的小球连线

最新推荐文章于 2023-06-30 16:26:37 发布

橘子爱吃香菜

最新推荐文章于 2023-06-30 16:26:37 发布

阅读量300

点赞数 1

分类专栏： canvas 前端文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_48683052/article/details/123230969

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
		<style type="text/css">
			body {
			  background-color: #fff;
			}
			canvas {
			  display: block;
			  margin: 100px auto;
			  background-color: black;
			}
		</style>
	</head>
	<body>
		 <canvas id="canvas" width="800" height="500"></canvas>
		 <script>
            // 随机数
            function randNum(min, max) {
	            return Math.round(Math.random() * (max - min) + min)
            }
            // 随机颜色
            function randColor() {
	            return 'rgb(' + randNum(0, 255) + ',' + randNum(0, 255) + ',' + randNum(0, 255) + ')'
            }
        </script>
		<script type="text/javascript">
			var ctx = canvas.getContext("2d"); //句柄
			//小球类
			function Ball(canvas) {
				this.W = canvas.width; // 最大容器区域
				this.H = canvas.height; //最大容器区域
				this.r = randNum(1, 2); //随机半径
				this.x = randNum(this.r, this.W - this.r); //小球位置随机
				this.y = randNum(this.r, this.H - this.r); //小球位置随机
				this.color = randColor(); //颜色
				this.speedX = randNum(1, 2); //随机X速度大小
				this.speedX *= randNum(0, 1) == 1 ? -1 : 1; //随机X方向
				this.speedY = randNum(1, 2); //随机Y速度大小
				this.speedY *= randNum(0, 1) == 1 ? -1 : 1; //随机Y方向
			}

			//绘制方法
			Ball.prototype.draw = function() {
				ctx.save();
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.r, 0, 360, false);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.restore();
			};

			//移动小球方法
			Ball.prototype.move = function() {
				this.x += this.speedX;
				this.y += this.speedY;
				//边界检测
				if (this.x < this.r || this.x > this.W - this.r) {
					this.speedX *= -1; //方向取反
				}
				if (this.y < this.r || this.y > this.H - this.r) {
					this.speedY *= -1; //方向取反
				}
			};

			//获取小球之间的距离
			Ball.prototype.getLengthTo = function(ball) {
				//lx 直角边
				var lx = this.x - ball.x;
				//ly 直角边
				var ly = this.y - ball.y;
				//lz 斜边
				var lz = Math.sqrt(lx * lx + ly * ly, 2);
				return lz;
			};

			//画线
			Ball.prototype.lineTo = function(ball) {
				ctx.save();
				ctx.beginPath();
				ctx.moveTo(this.x, this.y);
				ctx.lineTo(ball.x, ball.y);
				ctx.strokeStyle = randColor();
				ctx.stroke();
				ctx.restore();
			};

			//创建小球
			var balls = [];
			for (var i = 0; i < 800; i++) {
				balls.push(new Ball(canvas));
			}
			var bb=[]
			function animation() {
				//清画布
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				//绘制并移动小球
				balls.map((ball) => {
					ball.draw();
					ball.move();
				});
				//小球间连线
				// drawLineOnBalls(200);
				//遍历小球数组
				
				for (var i = 0; i < balls.length; i++) {
					var ball = balls[i];
					var lx = Math.pow(mousepoint.x - ball.x, 2);
					var ly = Math.pow(mousepoint.y - ball.y, 2);
					var length = Math.sqrt(lx + ly, 2);
					if(bb.length>50){
						bb=[]
					}
					if (length <= 100) {
						bb.push(balls[i])
						// ctx.save();
						// ctx.beginPath();
						// ctx.moveTo(mousepoint.x, mousepoint.y);
						// ctx.lineTo(ball.x, ball.y);
						// ctx.strokeStyle = randColor();
						// ctx.stroke();
						// ctx.restore();
						drawLineOnBalls(100);
					}
				}
				requestAnimationFrame(animation);
			}

			//绘制连线方法
			function drawLineOnBalls(length) {
				//遍历小球数组，进行两两比较画线
				for (var i = 0; i < bb.length; i++) {
					for (var j = i + 1; j < bb.length; j++) {
						var ball1 = bb[i];
						var ball2 = bb[j];
						//判断ball1 到 ball2之间的距离 <= length
						if (ball1.getLengthTo(ball2) <= length) {
							ball1.lineTo(ball2);
						}
					}
				}
			}

			var mousepoint = {
				x: 0,
				y: 0,
			};
			animation();

			$("#canvas").mousemove(function(e) {
				mousepoint.x = e.offsetX;
				mousepoint.y = e.offsetY;
			});
		</script>
	</body>
</html>

橘子爱吃香菜

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
canvas——鼠标移动附近的小球连线

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.12.4.js"></script> <style type="text/css"> body { background-color: #f.
复制链接

扫一扫