首页JavaScript 和 HTML5 Canvas 实现仪表代码

JavaScript 和 HTML5 Canvas 实现仪表代码

时间: 2024-03-21 13:38:22 浏览: 133

以下是一个简单的 JavaScript 和 HTML5 Canvas 实现仪表的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仪表示例</title> <style> canvas { width: 300px; height: 300px; background-color: #eee; } </style> </head> <body> <canvas id="myCanvas"></canvas> <script> // 获取 Canvas 元素和上下文对象 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制仪表底盘 ctx.beginPath(); ctx.arc(150, 150, 120, 0, 2*Math.PI); ctx.lineWidth = 20; ctx.strokeStyle = "#ccc"; ctx.stroke(); // 绘制仪表指针 function drawPointer(angle, color) { ctx.beginPath(); ctx.moveTo(150, 150); ctx.lineTo(150 + 100*Math.cos(angle), 150 + 100*Math.sin(angle)); ctx.lineWidth = 10; ctx.strokeStyle = color; ctx.stroke(); } // 更新仪表指针的位置 function updatePointer(value) { var angle = (value - 50) * Math.PI / 50; drawPointer(angle, "#f00"); } // 模拟数据更新 setInterval(function() { var value = Math.floor(Math.random() * 100); updatePointer(value); }, 1000); </script> </body> </html> ``` 该示例实现了一个简单的仪表，包括仪表底盘和指针。通过调用 `drawPointer()` 方法绘制指针，调用 `updatePointer()` 方法更新指针的位置。在示例中，通过 setInterval() 方法模拟数据更新，每秒钟更新一次指针的位置。

阅读全文