使用canvas画树形结构关系图
以下是一个简单的示例，使用HTML5 <canvas>元素绘制一个简单的树形结构关系图：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 定义树的节点
function Node(x, y, text) {
this.x = x;
this.y = y;
this.text = text;
}
// 绘制树的函数
function drawTree(node, ctx) {
ctx.beginPath();
ctx.moveTo(node.x, node.y);
ctx.lineTo(node.x + 100, node.y);
ctx.stroke();
ctx.font = '12px Arial';
ctx.fillText(node.text, node.x + 120, node.y + 5);
// 绘制左子树
if (node.left !== null) {
ctx.moveTo(node.x + 50, node.y);
ctx.lineTo(node.x + 50, node.y - 50);
ctx.stroke();
drawTree(node.left, ctx);
}
// 绘制右子树
if (node.right !== null) {
ctx.moveTo(node.x + 150, node.y);
ctx.lineTo(node.x + 150, node.y - 50);
ctx.stroke();
drawTree(node.right, ctx);
}
}
// 创建树的节点
var root = new Node(100, 100, 'A');
root.left = new Node(100, 50, 'B');
root.right = new Node(100, 50, 'C');
root.left.left = new Node(50, 25, 'D');
root.left.right = new Node(150, 25, 'E');
root.right.left = new Node(50, 75, 'F');
root.right.right = new Node(150, 75, 'G');
// 绘制树
drawTree(root, ctx);
</script>
</body>
</html>这段代码定义了一个简单的Node类来表示树的节点，并且有一个drawTree函数来递归地绘制这棵树。每个节点的x和y坐标表示在canvas上的位置，text属性是将要显示的文本。这是一个基本的实现，可以根据需要添加更多的功能，比如节点的样式定制、支持更复杂的树形结构等。
评论已关闭