首页canvas 绘制一个曲线统计图

canvas 绘制一个曲线统计图

时间: 2023-08-03 16:27:18 浏览: 173

好的，以下是一个使用 Canvas 绘制曲线统计图的示例代码： ```html <!DOCTYPE html> <html> <head> <title>Canvas 绘制曲线统计图</title> <style> canvas { border: 1px solid #ccc; } </style> </head> <body> <canvas id="myCanvas" width="600" height="400"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制坐标轴 ctx.beginPath(); ctx.moveTo(50, 50); ctx.lineTo(50, 350); ctx.lineTo(550, 350); ctx.stroke(); // 绘制曲线 var data = [20, 50, 100, 80, 120, 200, 180]; ctx.beginPath(); ctx.moveTo(50, 350 - data[0]); for (var i = 1; i < data.length; i++) { ctx.lineTo(50 + i * 70, 350 - data[i]); } ctx.strokeStyle = "#f00"; ctx.stroke(); // 绘制坐标刻度 ctx.beginPath(); ctx.font = "12px Arial"; for (var i = 0; i < data.length; i++) { ctx.moveTo(50 + i * 70, 350); ctx.lineTo(50 + i * 70, 355); ctx.fillText(i+1, 50 + i * 70, 370); } ctx.stroke(); </script> </body> </html> ``` 以上代码会绘制一个坐标轴，曲线和坐标刻度，可以根据需要进行修改。

阅读全文