在一个圆圈内表示一个点的位置，以任意段的百分比表示

Question

好的，所以...这就是我想要做的。在HTML/JS中。用数学知识会让十二岁的孩子难堪。

例如，在一个页面上有20个复选框，用户选择其中五个。然后一个圆圈出现在页面上（我预计会使用拉斐尔之类的画布库），并在其周围排列五个答案。所以这是我不知道该怎么做的第一件事。将一个圆分成x个相等的分段。奇怪的是，像“cos”和“罪恶”这样的​​外国术语即将出现。

但后来它变得更有趣：用户可以点击圆上的一个点。这一点被翻译成每个细分市场的某种百分比值。因此，如果用户检查快乐，脾气暴躁，打喷嚏，杂耍和害羞，并点击该圈子，我可以告诉他们他们有37％快乐，42％DOPY和21％打喷嚏。

最好的比喻可能是颜色选择器轮，但我找不到任何可以重新调整用途的JS。饼图很接近 - 而且有一个很好的拉斐尔演示 - 但我有一种感觉，一个饼图分段的固定边界会让我错误地估计整个圆圈内的百分比位置。所以，考虑到我的模糊和思路不清的要求，以及显然没有任何“这是我迄今为止所尝试的”代码 - 因为我除了高中之外没有最开始的地方三角书籍，任何人都可以提出任何代码库或片段，可能会让我至少指向正确的方向？

谢谢:)

========================

编辑： 哇，感谢所有的答案。我会尽量细化问题/ s的比特：

我将需要绘制围绕其圆周均匀排列的点x个圆。点数将与用户选中的复选框数量相关。我认为我可以在自己选择的页面上绘制一个带有尺寸和位置的圆圈（使用拉斐尔或类似的画布库），但是我该如何计算那些点的x/y像素坐标应该在圆周上？

第二位：用户然后点击圆圈中的任意位置。我猜想我要做的是计算每个圆周点距离用户点击点的距离 - 我不确定如何去做，除了模糊的怀疑，它涉及虚构的三角形 - 然后总共有多少距离每个距离都是。最后一点，至少我可以管理。

其实，这是开始有意义的。我真不知道该TRIG东西是如何工作的，但令人惊讶的是什么了输入你的问题，使陌生人会理解它可以做些什么来帮助自己理解...

Answer 1

你需要修改你的问题更清楚地解释什么你正在努力去做。同时，我可以给你以下信息，可以帮助你开始。

首先，您需要知道用户选择的五个复选框的位置。为了做到这一点，jQuery库提供了一些方便的功能，例如$.position和$.offset。

您的问题没有明确说明您要绘制的圆圈与用户点击的五个复选框的关系。至于实际绘制圆形，您可能想要使用类似HTML5 canvas元素的东西。我还没有用过它，所以我不能告诉你很多关于它的事情。

您可能想尝试在*上询问有关如何在计算圆的中心和半径后在网页上绘制圆的另一个问题。

至于做数学有关的圈子，你需要知道一个圆可以在XY平面上通过以下公式进行参数化：

x = x0 + r cos(theta) 
y = y0 + r sin(theta) 

其中（X0，Y0）是的中心圆，r是圆的半径，θ范围在0到2 * Pi弧度（0到360度）

让我们知道更多关于您在做什么，我们可以给您一些更具体的信息。