用HTML5Canvas实现璀璨星空

最新推荐文章于 2025-07-06 11:18:21 发布

追星逐月丶

最新推荐文章于 2025-07-06 11:18:21 发布

阅读量1.2k

点赞数 2

文章标签： html5 canvas 动画星空

本文展示了一个基于HTML、CSS和JavaScript实现的动态节点布局与交互演示，通过鼠标操作调整节点位置，展示节点间的连线，并根据节点之间的距离动态调整连线粗细与透明度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示效果如下：

演示地址如下：http://119.29.253.206/brilliantStars.html

演示代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
	</style>
</head>
<body>
	<canvas height="620" width="1360" id="canvas"
	 style="position: absolute; height: 100%; background-color: black;"/></canvas>
	<script type="text/javascript">
		var canvasEl = document.getElementById('canvas');
		var ctx = canvasEl.getContext('2d');
		var mousePos = [0, 0];
		var nodes = [];
		var edges = [];
		var easingFactor=0.6;
		var edgeColor="white";
		var nodeColor="white";
				window.onresize = function () {
			canvasEl.width = document.body.clientWidth;
			canvasEl.height = canvasEl.clientHeight;
			if (nodes.length == 0) {
				constructNodes();
			}
			render();
			step();
		};
		window.onresize();

		function constructNodes() {
			for (var i = 0; i < 100; i++) {
				var node = {
					drivenByMouse: i == 0,
					x: Math.random() * canvasEl.width,
					y: Math.random() * canvasEl.height,
					vx: Math.random() * 1 - 0.5,
					vy: Math.random() * 1 - 0.5,
					radius: Math.random() > 0.9 ? 3 + Math.random() * 3 : 1 + Math.random() * 3
				};
				nodes.push(node);
			}
			nodes.forEach(function (e) {
				nodes.forEach(function (e2) {
					if (e == e2) {
						return;
					}
					var edge = {
						from: e,
						to: e2
					}
					addEdge(edge);
				});
			});
		}

		function addEdge(edge) {
			var ignore = false;
			edges.forEach(function (e) {
				if (e.from == edge.from & e.to == edge.to) {
					ignore = true;
				}
				if (e.to == edge.from & e.from == edge.to) {
					ignore = true;
				}
			});
			if (!ignore) {
				edges.push(edge);
			}
		}
		function step() {
			nodes.forEach(function (e) {
				if (e.drivenByMouse) {
					return;
				}
				e.x += e.vx;
				e.y += e.vy;
				function clamp(min, max, value) {
					if (value > max) {
						return max;
					} else if (value < min) {
						return min;
					} else {
						return value;
					}
				}
				if (e.x <= 0 || e.x >= canvasEl.width) {
					e.vx *= -1;
					e.x = clamp(0, canvasEl.width, e.x)
				}
				if (e.y <= 0 || e.y >= canvasEl.height) {
					e.vy *= -1;
					e.y = clamp(0, canvasEl.height, e.y)
				}
			});
			adjustNodeDrivenByMouse();
			render();
			window.requestAnimationFrame(step);
		}

		function adjustNodeDrivenByMouse() {
			nodes[0].x += (mousePos[0] - nodes[0].x) / easingFactor;
			nodes[0].y += (mousePos[1] - nodes[0].y) / easingFactor;
		}
	
		function render() {
			ctx.fillStyle = canvasEl.style.backgroundColor;
			ctx.fillRect(0, 0, canvasEl.width, canvasEl.height);
			edges.forEach(function (e) {
				var l = lengthOfEdge(e);
				var threshold = canvasEl.width / 8;
				if (l > threshold) {
					return;
				}
				ctx.strokeStyle = edgeColor;
				ctx.lineWidth = (1.0 - l / threshold) * 2.5;
				ctx.globalAlpha = 1.0 - l / threshold;
				ctx.beginPath();
				ctx.moveTo(e.from.x, e.from.y);
				ctx.lineTo(e.to.x, e.to.y);
				ctx.stroke();
			});
			ctx.globalAlpha = 1.0;
			nodes.forEach(function (e) {
				if (e.drivenByMouse) {
					return;
				}
				ctx.fillStyle = nodeColor;
				ctx.beginPath();
				ctx.arc(e.x, e.y, e.radius, 0, 2 * Math.PI);
				ctx.fill();
			});
		}
		function lengthOfEdge(e){
			return Math.sqrt( Math.pow((e.from.x-e.to.x),2)+
				Math.pow((e.from.y-e.to.y),2) );
		}

	</script>
</body>
</html>