首页用canvas绘制一个指标拆解图，且整理成一个文件输出

用canvas绘制一个指标拆解图，且整理成一个文件输出

时间: 2023-11-22 16:53:04 浏览: 134

好的，以下是一个简单的指标拆解图示例，使用 HTML5 的 Canvas 绘制： ```html <!DOCTYPE html> <html> <head> <title>指标拆解图</title> <style> canvas { border: 1px solid black; } </style> </head> <body>  <canvas id="myCanvas" width="400" height="300"></canvas> <script> // 获取画布对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制矩形 ctx.fillStyle = "#ccc"; ctx.fillRect(50, 50, 300, 200); // 绘制文字 ctx.fillStyle = "#000"; ctx.font = "bold 18px serif"; ctx.fillText("指标拆解图", 150, 80); ctx.font = "14px serif"; ctx.fillText("指标一", 70, 120); ctx.fillText("指标二", 70, 160); ctx.fillText("指标三", 70, 200); // 绘制箭头 ctx.beginPath(); ctx.moveTo(150, 135); ctx.lineTo(320, 135); ctx.lineTo(315, 130); ctx.moveTo(320, 135); ctx.lineTo(315, 140); ctx.stroke(); ctx.beginPath(); ctx.moveTo(150, 175); ctx.lineTo(270, 175); ctx.lineTo(265, 170); ctx.moveTo(270, 175); ctx.lineTo(265, 180); ctx.stroke(); ctx.beginPath(); ctx.moveTo(150, 215); ctx.lineTo(220, 215); ctx.lineTo(215, 210); ctx.moveTo(220, 215); ctx.lineTo(215, 220); ctx.stroke(); </script> </body> </html> ``` 将以上代码保存成一个 HTML 文件，使用浏览器打开即可看到绘制的指标拆解图，并且该文件可供输出。

阅读全文