我正在尝试在canvas中构建一个圆形仪表盘,但是遇到了很大的困难。我想要的是这个:
只有白色圆圈、红线、刻度线,小的那些,然后每50个就有一个更大的,每100个就有一个带数字的大刻度线和指针。我不太关心它上面的任何其他文字或银边框。有谁能指点我一下方向吗?我对canvas还比较新,但我不想使用任何预先构建的库或其他东西。
![enter image description here](https://istack.dev59.com/9o3ZN.webp)
谢谢!
谢谢!
输出:
好的,这里你可以看到:
看起来像这样:
我并不是为了你而做这一切,但它向你展示了如何制作所有相关部分而无需复杂的数学。从这里开始,你应该能够轻松完成所有事情。
var ctx = document.getElementById('pump-discharge').getContext('2d');
ctx.clearRect(0, 0, 150, 150); // clears rectangle after each move
var r = 40;
var rads = i*(Math.PI/180);
var x = r*Math.cos(rads) + 55;
var y = r*Math.sin(rads) + 55;
ctx.strokeStyle = "#D40000";
ctx.fillStyle = "#D40000";
ctx.lineWidth = 6;
ctx.beginPath();
ctx.moveTo(55, 55);
ctx.lineTo(x, y);
ctx.stroke();
translate
和rotate
,因此他绘制的线始终是具有固定坐标的简单直线。您可以以同样的方式完成刻度线。 - Chris Nashr*Math.cos(angle) + x
、r*Math.sin(angle)+y
,而不是在 JavaScript 中手动执行。也许更重要的是,减少了出错的机会 ;) - Chris Nash