Javascript 以任意线段的百分比表示圆内的点位置

好吧，那么。。。这就是我要做的。在HTML/JS中。数学知识会让一个12岁的孩子难堪

比如说，一个页面上有20个复选框，用户选择。。其中五个。然后，页面上会出现一个圆圈（我希望使用像Raphael这样的画布库），圆圈周围排列着五个答案。所以这是我不知道怎么做的第一件事；将圆分割为x等分。奇怪的是，像“cos”和“sin”这样的外来词汇正在隐约出现

但是它变得更加有趣：用户可以点击圆圈上的一个点。这一点被转化为每一段的某个百分比值。因此，如果用户检查快乐、脾气暴躁、打喷嚏、昏昏欲睡和害羞，然后单击圆圈，我可以告诉他们他们37%快乐、42%昏昏欲睡和21%打喷嚏

最好的类比可能是一个颜色选择器轮，但我找不到任何可以重新利用的JS轮。饼图很接近——有一个很好的拉斐尔演示——但我有一种感觉，饼图部分的固定边界将使我在估计整个圆圈内的百分比位置时走上错误的道路

因此，考虑到我含糊不清、考虑不周的要求，以及明显缺乏任何“这就是我迄今为止尝试过的”代码——因为除了高中的三角学书籍之外，我甚至没有一个模糊的起点，有谁能建议任何代码库或代码片段，至少能让我指出正确的方向

谢谢：）

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

编辑： 哇，谢谢你的回答。我将尝试对问题进行一些细化：

我需要画一个圆周上有x个点的圆，这些点在圆周上平均排列。点数将与用户选中的复选框数相关联

这是我坚持的第一点：我想我可以在我自己选择的页面上（使用Raphael或类似的画布库）的某个位置绘制一个具有尺寸的圆，但是我如何计算这些点在圆周长上的x/y像素坐标呢

第二位：用户然后单击圆圈中的任意位置。我想我要做的是计算每个圆周点离用户点击点有多远——我不知道该怎么做，除了一个模糊的怀疑，它涉及到假想的三角形——然后计算每个距离的总距离。最后一点，至少，我能做到

---

事实上，这已经开始有意义了。我仍然不知道trig是如何工作的，但是把你的问题打出来，让陌生人理解它能帮助你自己理解，这真是太神奇了。

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

首先，您需要知道用户选择的五个复选框的位置。为此，jQuery库提供了一些方便的函数，如

$.position

和

$.offset

您的问题没有明确说明要绘制的圆相对于用户单击的五个复选框的位置。至于实际绘制圆，您可能需要使用类似HTML5画布元素的东西。我自己还没用过，所以我不能告诉你太多

您可能想尝试在StackOverflow上问另一个问题，即在计算圆的中心和半径后，如何在网页上绘制圆

关于圆的数学计算，您需要知道，圆可以通过以下方程式在x-y平面上参数化：

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

其中（x0，y0）是圆的中心，r是圆的半径，θ的范围为0到2*Pi弧度（0到360度）

---

让我们更多地了解您正在做什么，我们可以为您提供一些更具体的信息。

我认为您需要对您的问题进行一些改进。你说你不知道如何将一个圆“分割成x个相等的线段”，但是如果线段相等，那么计算百分比就相当容易了，因为每个楔块的大小都相同。或者这是一个不同的圆圈？我相信相关的数学在这里：关于你的第三段，你能详细说明你如何确定百分比值吗？假设我在脾气暴躁的段落中右击，我的分数是多少？如果我点击靠近圆圈边缘或中心的位置，百分比是如何变化的？如果我理解正确，你在第三段中描述的内容将无法以有意义的方式完成。用户只有两个“自由度”（例如，X坐标和Y坐标；或者，从中心到中心的距离和方向），但这些百分比需要四个（例如，快乐、暴躁、昏昏欲睡和打喷嚏，Bash是100%减去这些自由度的总和）。+1“令人惊讶的是，键入你的问题，让陌生人理解你能做什么。”-被称为橡皮鸭。Re：“你需要知道用户选择的五个复选框的位置”：我不这么认为。据我所知，复选框只是普通的复选框，就像普通的复选框一样使用。用户使用它们来选择圆圈上的类别。