html5脑图_使用HTML5技术绘制思维导图
时间: 2023-07-20 11:06:04 浏览: 73
HTML5技术可以用来绘制思维导图,实现类似于脑图的效果。下面是一个基本的HTML5脑图实现示例:
```
<!DOCTYPE html>
<html>
<head>
<title>HTML5脑图示例</title>
<style>
/* 样式表 */
#canvas {
border: 1px solid #ccc;
}
</style>
</head>
<body>
<canvas id="canvas" width="800" height="600"></canvas>
<script>
/* JavaScript代码 */
// 获取canvas元素
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
// 绘制节点
function drawNode(x, y, text) {
context.fillStyle = '#fff';
context.fillRect(x-50, y-30, 100, 60);
context.strokeStyle = '#000';
context.strokeRect(x-50, y-30, 100, 60);
context.fillStyle = '#000';
context.font = 'bold 16px Arial';
context.textAlign = 'center';
context.fillText(text, x, y);
}
// 绘制连线
function drawLine(x1, y1, x2, y2) {
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke();
}
// 绘制脑图
drawNode(400, 100, '节点1');
drawNode(250, 200, '节点2');
drawNode(550, 200, '节点3');
drawNode(150, 300, '节点4');
drawNode(350, 300, '节点5');
drawNode(650, 300, '节点6');
drawLine(400, 60, 250, 170);
drawLine(400, 60, 550, 170);
drawLine(250, 170, 150, 280);
drawLine(250, 170, 350, 280);
drawLine(550, 170, 650, 280);
</script>
</body>
</html>
```
这个示例中,我们通过获取canvas元素,并使用getContext('2d')方法获取绘图上下文,然后编写了三个绘图函数:drawNode用于绘制节点,drawLine用于绘制连线。最后我们调用这些函数,绘制出了一个简单的脑图。