使用JS / Canvas在色轮上绘制RGB或Hex值

Question

我有一系列处理过的RGB值，我想将它们绘制到像下面那样的色轮上。

例如

RGBList = [
    {'r':231,'g':52,'b':35},
    {'r':24,'g':111,'b':24}
];

我希望上面示例列表中的每个对象都被绘制为圆圈顶部的标记/点。

我找到了以无数种方式在画布上创建色轮的代码，但是在我的生活中无法找到或找到有关将RGB代码转换为合理的XY坐标的信息。绘图的目的。

Color Wheel Canvas代码示例：http://jsfiddle.net/yH6JE/

如果任何人可以提供帮助，我更喜​​欢如果答案是使用画布的原始JS和HTML。这是我正在做的业余爱好项目，我想绘制平均RGB值以及Kmeans质心来表示kmeans聚类（机器学习），只是为了给我的结果一个直观的表示而不是直接的数据。 / p>

Answer 1

在这里看到一个分叉的小提琴：http://jsfiddle.net/havdto6e/4/

我做的是两件事：

1. 在色圈中添加淡入淡出的渐变，以便表示值
2. 添加一个功能，将RGB颜色绘制到滚轮上。 为此，使用here
中的函数将RGB坐标转换为HSV坐标

请注意，某些RGB值将绘制在同一位置，因为未表示值（“亮度”）。在颜色选择器中，通常在单独的滑块中选择该值 例如，这两种不同的颜色将出现在圆圈的相同位置：

{'r':255,'g':128,'b':128},
{'r':153,'g':77,'b':77}