使用html5画布在圆圈中以不同的角度显示不同的值 [英] Display different values at different angles in a circle using html5 canvas

问题描述

使用HTML5 Canvas和Javascript我需要在圆圈内以不同的角度显示不同的值（以点表示）。

示例数据：

val 34％@ 0°，

val 54％@ 12°，

val 23％@ 70°，

和所以...

如果我有一个画布300 x 300px，圆的中心位于x：150像素和y：150像素，半径为150像素，我如何计算在12度时将值设置为54％的位置在哪里？

我的数学是可怕的xD

我会感谢您的帮助，如果我没有足够清楚，请问问题。

感谢您的倾听，您深入了解：D

EDIT（详细解释）：

我要完成的工作：

我希望这会使我的问题更容易理解。

（正如你所看到的，与上面的值不一样）

解决方案

您可以使用它从极坐标（半径，角度）坐标到笛卡尔坐标：

  //θ：angle in [0，2π[
 function polarToCartesian ）{
 return {x：r * Math.cos（θ），y：r * Math.sin（θ）}; 
} 
  

例如，如果要在12°绘制，点像这样：

  var p = polarToCartesian（150，12 * 2 * Math.PI / 360） 
 p.x + = 150; p.y + = 150; 
  

编辑： my polarToCartesian 函数将弧度用作输入，就像Canvas API中的许多函数一样。如果你习惯了学位，你可能需要这样：

  function degreesToRadians（a）{
 return Math .PI * a / 180; 
} 
  

Using HTML5 Canvas and Javascript I need to display different values (represented by a dot maybe) at different angles inside a circle.

Example data:
val 34% @ 0°,
val 54% @ 12°,
val 23% @ 70°,
and so on...

If I have a canvas 300 x 300px and the center of the circle is located at x: 150px and y: 150px with a radius of 150px, how would I calculate where to set my dot for the value 54% at 12 degrees?

My math is kinda terrible xD

I'd appreciate any kind of help and please ask questions if I do not make myself clear enough.

Thank you for listening and thank you in advance for you deep insights :D

EDIT (to explain in more detail):

Here is an image to illustrate what I am trying to accomplish:

I hope this makes my question a little more understandable.
(As you can see, not the same values as above)

Ty for your patience!

解决方案

You may use this to convert from polar (radius, angle) coordinates to cartesian ones :

// θ : angle in [0, 2π[
function polarToCartesian(r, θ) {
    return {x:r*Math.cos(θ), y: r*Math.sin(θ)};
}

For example, if you want to draw at 12°, you may compute the point like this :

var p = polarToCartesian(150, 12*2*Math.PI/360);
p.x += 150; p.y += 150;

EDIT : my polarToCartesian function takes radians as input, as many function in the Canvas API. If you're more used to degrees, you may need this :

 function degreesToRadians(a) {
     return Math.PI*a/180;
 }

这篇关于使用html5画布在圆圈中以不同的角度显示不同的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！