canvas实现类似思维导图的效果
思维导图是一种非常实用的工具，可以帮助人们更好地组织和管理自己的思维。在Canvas中，可以通过绘制节点和连线来实现类似思维导图的效果。
以下是一个简单的思维导图实现示例：
<!DOCTYPE html>
<html>
<head>
<title>思维导图</title>
<style type="text/css">
canvas {
background-color: #fff;
border: 1px solid #999;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var nodes = [
{ x: 100, y: 100, text: '节点1' },
{ x: 300, y: 100, text: '节点2' },
{ x: 500, y: 100, text: '节点3' },
{ x: 200, y: 300, text: '节点4' },
{ x: 400, y: 300, text: '节点5' },
{ x: 300, y: 500, text: '节点6' }
];
var links = [
{ source: 0, target: 1 },
{ source: 1, target: 2 },
{ source: 0, target: 3 },
{ source: 1, target: 4 },
{ source: 4, target: 5 }
];
function drawNode(node) {
ctx.beginPath();
ctx.arc(node.x, node.y, 30, 0, Math.PI * 2);
ctx.fillStyle = '#ff8';
ctx.fill();
ctx.fillStyle = '#000';
ctx.font = "bold 20px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(node.text, node.x, node.y);
ctx.closePath();
}
function drawLink(link) {
var source = nodes[link.source];
var target = nodes[link.target];
ctx.beginPath();
ctx.moveTo(source.x, source.y);
ctx.lineTo(target.x, target.y);
ctx.strokeStyle = '#999';
ctx.lineWidth = 2;
ctx.stroke();
ctx.closePath();
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < links.length; i++) {
drawLink(links[i]);
}
for (var i = 0; i < nodes.length; i++) {
drawNode(nodes[i]);
}
}
canvas.addEventListener('mousemove', function(e) {
var rect = canvas.getBoundingClientRect();
var mouseX = e.clientX - rect.left;
var mouseY = e.clientY - rect.top;
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i];
var distance = Math.sqrt(Math.pow(mouseX - node.x, 2) + Math.pow(mouseY - node.y, 2));
if (distance < 30) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawLink({ source: i, target: i });
drawNode(node);
break;
}
}
});
draw();
</script>
</body>
</html>
在这个示例中，我们定义了一组节点和一组连线，分别表示思维导图中的主题和子主题。然后，我们在Canvas中绘制这些节点和连线，并添加鼠标交互效果，当鼠标悬停在节点上时，会高亮显示该节点，并显示节点的文本内容。
这只是一个简单的示例，实际上，我们可以通过Canvas实现更复杂的思维导图效果，例如支持拖拽和缩放、添加节点和连线、设置节点样式等等。
原文地址: https://www.cveoy.top/t/topic/brFa 著作权归作者所有。请勿转载和采集!