构建一个圆形仪表html 5画布

Question

我正在尝试用帆布制作圆形量规，并且我很难用它。我基本上想要这个：只是白色的圆圈，红色的线条，抽搐的标记，小的，然后是每50个更大的一个，以及每100个数字的大抽动标记和针。我真的不关心任何其他写作或银色边框。谁能指出我正确的方向？我对画布很新，但我不想使用任何预构建的库或任何东西。

谢谢！

Answer 1

这是一个工作示例。我犹豫是否发布了整个代码，因为当你自己把它放在一起并理解它正在做什么时，它会更好。如果你不确定它是如何放在一起的话，可能很难编辑它来做你想做的事情。我试着评论我能做什么。

尽管它看起来不像，但我从贾斯汀的例子开始。我认为值得一提。

点击仪表以增加压力，加速度等

http://jsfiddle.net/JdLUw/

输出：

Answer 2

这是一个开始：http://en.wikipedia.org/wiki/Polar_coordinate_system#Converting_between_polar_and_Cartesian_coordinates

十年前我在PHP中构建了类似的东西。你可以使用一个图像作为基础与刻度线（比一些渲染的刻度更漂亮）和渲染手。

http://jsfiddle.net/2zhDp/

将move（）方法的代码更改为此...

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

Answer 3

好的，你去：

http://jsfiddle.net/77w3c/

看起来像这样：

我没有为你做这一切，但它告诉你如何制作所有相关部分而不需要复杂的数学运算。你应该可以从这里轻松地完成所有事情。