首页Canvas 是 HTML5 中的一个标签，可以用来绘制 2D 图形。如果要在 Canvas 中绘制故障树js代码

Canvas 是 HTML5 中的一个标签，可以用来绘制 2D 图形。如果要在 Canvas 中绘制故障树js代码

时间: 2024-02-23 17:59:23 浏览: 20

以下是一个简单的示例代码，用于在 Canvas 中绘制一个简单的故障树： ```html <!DOCTYPE html> <html> <head> <title>Canvas 绘制故障树</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制节点 ctx.beginPath(); ctx.arc(250, 100, 50, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // 绘制连接线 ctx.beginPath(); ctx.moveTo(250, 150); ctx.lineTo(250, 250); ctx.strokeStyle = "black"; ctx.lineWidth = 5; ctx.stroke(); // 绘制节点 ctx.beginPath(); ctx.arc(250, 300, 50, 0, 2 * Math.PI); ctx.fillStyle = "red"; ctx.fill(); // 绘制文字 ctx.font = "30px Arial"; ctx.fillStyle = "black"; ctx.textAlign = "center"; ctx.fillText("故障树", 250, 400); </script> </body> </html> ``` 以上代码绘制了一个简单的故障树，包括两个节点和一条连接线。你可以根据需要修改节点的位置、大小和颜色，以及连接线的粗细和颜色，来绘制不同的故障树。