javascript - 如何在 Canvas 中绘制压力表

Question

我想知道是否有人可以帮我解决一些 Canvas 问题。我对它很陌生，所以和我在一起。我有这个压力表 我想在 Canvas 上制作红色针的动画(在我的应用程序中，我用 Photoshop 将针取出，然后用 Canvas 重新绘制)。理想情况下，我希望它传递一个 Angular ，它会从它所在的位置移动到我传递的新 Angular (顺时针或逆时针移动)我也可以传递另一个变量来告诉它走哪条路.

我最初的想法是给它传递一个 0-600 的压力，然后计算出 1 psi 和 1 度之间的比率。但它不是太精确，所以它没有用。

我想知道接下来要做什么...我希望有人能帮我用 Canvas 、数字、刻度线和针重新创建这个量规。这样 Angular 和 psi 之间的比率将是准确的，我会知道多少 PSI = 1 度。

我的另一个问题是让它动画化。如果我传入一个结束 Angular 和一个起始 Angular ，我会设置动画。我宁愿只传递一个压力，它就会从原来的位置移动到新的 Angular 。

这是我的代码:http://jsfiddle.net/vPu3U/1/(抱歉乱七八糟的代码，我还在想 Canvas )

谢谢!!

编辑:我想我现在已经到了想出动画的地步。我现在的主要目标是找出刻度线。一旦我得到那些看起来与图片相似的等间距的，我就可能能够找出针并且我几乎已经完成了动画。由于所有的刻度标记彼此之间的距离相同，我可以计算出每个刻度标记( Angular )和 PSI 之间的比率。所以实际上它只是用刻度线和数字绘制半圆。谢谢!

Answer 1

旋转偏置针:
http://phrogz.net/tmp/canvas_gauge.html

在圆环中绘制刻度线:
http://phrogz.net/tmp/canvas_zoom_to_cursor.html