构建一个基于HTML 5画布的圆形仪表盘

Question

我正在尝试在canvas中构建一个圆形仪表盘，但是遇到了很大的困难。我想要的是这个： 只有白色圆圈、红线、刻度线，小的那些，然后每50个就有一个更大的，每100个就有一个带数字的大刻度线和指针。我不太关心它上面的任何其他文字或银边框。有谁能指点我一下方向吗？我对canvas还比较新，但我不想使用任何预先构建的库或其他东西。

谢谢！

- Bill

---

你可能需要阅读一份教程。 - david

你们中有人知道吗？我已经在谷歌上找了很久，但没有什么运气。 - Bill

我从这里开始：https://developer.mozilla.org/en/Canvas_tutorial - bennedich

Answer 1

这里有一个可用的示例。我犹豫是否要发布整个代码，因为当您可以自己组合并理解它在做什么时，效果更好。如果您不确定它是如何组合在一起的，可能很难编辑它以执行您想要的操作。我尽力注释了我能够注释的内容。

尽管看起来不像，但我是从Justin的示例开始的。我觉得值得一提。

点击表盘可以增加压力、加速度等。

http://jsfiddle.net/JdLUw/

输出：

- WesleyJohnson

---

谢谢，Jason！实际上我几天前在工作中做研究时就遇到了getNPointsInCircle函数，所以当我看到这个问题时，它恰好适合我已经处于的上下文。 - WesleyJohnson

这太棒了，不展示简直是浪费。 - ThinkingStiff

Answer 2

好的，这里你可以看到：

http://jsfiddle.net/77w3c/

看起来像这样：

我并不是为了你而做这一切，但它向你展示了如何制作所有相关部分而无需复杂的数学。从这里开始，你应该能够轻松完成所有事情。

- Simon Sarris

Answer 3

这是一个开始：http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates 大约十年前我用PHP编写了类似的东西。您可以使用带有刻度线的图像（比几个渲染的刻度线更美观）并渲染指针。

将您的代码更改为以下内容，用于move()方法...

http://jsfiddle.net/2zhDp/

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();

- Justin Thomas

---

我尝试将针叠加在那张图片上，但我发现它并不准确，而且当我移动针时，它离目标越来越远。 - Bill

这里是针正在旋转...我没有包括图片，但是可以在http://jsfiddle.net/vPu3U/1/ 查看。 - Bill

Bill在评论中提到的jsfiddle是正确的方法 - 它在上下文中使用了translate和rotate，因此他绘制的线始终是具有固定坐标的简单直线。您可以以同样的方式完成刻度线。 - Chris Nash

@ChrisNash 对于不断地进行画布平移和旋转与Justin的解决方案相比，有性能上的影响吗？ - WesleyJohnson

@WesleyJohnson Canvas 旋转可能会更有效率。因为你只是旋转了坐标系，而画布的坐标系始终存在。基本上，你通过使用浏览器的（本地）Canvas 实现，让它为你完成所有的 r*Math.cos(angle) + x、r*Math.sin(angle)+y，而不是在 JavaScript 中手动执行。也许更重要的是，减少了出错的机会 ;) - Chris Nash