以下是一个简单的使用HTML5 Canvas和JavaScript实现网络拓扑图的示例。
HTML代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>网络拓扑图Demo</title>
<style>
canvas {
border: 1px solid #333;
}
</style>
</head>
<body>
<canvas id="topology"></canvas>
<script src="topology.js"></script>
</body>
</html>
```
JavaScript代码：
```javascript
// 获取Canvas元素和上下文
var canvas = document.getElementById("topology");
var ctx = canvas.getContext("2d");
// 设置Canvas宽高
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 定义节点类
function Node(x, y, label) {
this.x = x;
this.y = y;
this.label = label;
}
// 定义连线类
function Link(startNode, endNode) {
this.startNode = startNode;
this.endNode = endNode;
}
// 定义节点和连线列表
var nodes = [
new Node(100, 100, "Node 1"),
new Node(200, 200, "Node 2"),
new Node(300, 100, "Node 3"),
new Node(400, 200, "Node 4")
];
var links = [
new Link(nodes[0], nodes[1]),
new Link(nodes[1], nodes[2]),
new Link(nodes[2], nodes[3]),
new Link(nodes[3], nodes[0])
];
// 绘制节点和连线
function drawTopology() {
// 清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制连线
links.forEach(function(link) {
ctx.beginPath();
ctx.moveTo(link.startNode.x, link.startNode.y);
ctx.lineTo(link.endNode.x, link.endNode.y);
ctx.stroke();
});
// 绘制节点
nodes.forEach(function(node) {
ctx.beginPath();
ctx.arc(node.x, node.y, 20, 0, 2 * Math.PI);
ctx.fillStyle = "#fff";
ctx.fill();
ctx.strokeStyle = "#333";
ctx.stroke();
ctx.fillStyle = "#333";
ctx.font = "12px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(node.label, node.x, node.y);
});
}
// 监听窗口大小改变事件，重新设置Canvas宽高
window.addEventListener("resize", function() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
drawTopology();
});
// 绘制初始状态的拓扑图
drawTopology();
```
这个示例中，我们定义了`Node`和`Link`两个类来表示节点和连线，然后创建了一个节点和连线的列表，最后在`drawTopology`函数中根据列表中的节点和连线绘制出拓扑图。我们还监听了窗口大小改变事件，当窗口大小改变时重新设置Canvas宽高并重新绘制拓扑图。
你可以根据自己的需求修改节点和连线的坐标、标签、样式等属性，进一步完善这个示例。
扫一扫
981
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
