首页canvas画左右负正仪表盘来动态改变

canvas画左右负正仪表盘来动态改变

时间: 2023-06-28 20:08:49 浏览: 143

可以使用canvas来画左右负正仪表盘，并且可以通过JavaScript动态地改变它的值。以下是一个基本的示例代码： ```html <!DOCTYPE html> <html> <head> <title>仪表盘示例</title> </head> <body> <canvas id="myCanvas" width="300" height="300"></canvas> <script> // 获取画布元素 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 绘制外圆 ctx.beginPath(); ctx.arc(150, 150, 120, 0, 2 * Math.PI); ctx.stroke(); // 绘制刻度 for (var i = -5; i <= 5; i++) { ctx.beginPath(); ctx.moveTo(150 + 110 * Math.cos(i * Math.PI / 6), 150 + 110 * Math.sin(i * Math.PI / 6)); ctx.lineTo(150 + 120 * Math.cos(i * Math.PI / 6), 150 + 120 * Math.sin(i * Math.PI / 6)); ctx.stroke(); } // 绘制指针 function drawPointer(angle) { ctx.beginPath(); ctx.moveTo(150, 150); ctx.lineTo(150 + 100 * Math.cos(angle), 150 + 100 * Math.sin(angle)); ctx.stroke(); } // 初始化指针位置 var angle = 0; drawPointer(angle); // 监听键盘事件，改变指针位置 document.addEventListener("keydown", function(event) { switch (event.keyCode) { case 37: // 左箭头键 angle -= Math.PI / 12; break; case 39: // 右箭头键 angle += Math.PI / 12; break; } drawPointer(angle); }); </script> </body> </html> ``` 这个示例代码绘制了一个半径为120像素的外圆，并在圆周上绘制了刻度。指针的位置可以通过左右箭头键来改变。你可以根据自己的需求来修改这个示例代码，绘制出左右负正的仪表盘。

阅读全文