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

Question

我有一组经过处理的 RGB 值，我想将它们绘制到如下所示的色轮上。

例如。

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

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

我找到了以多种方式在 Canvas 中创建色轮的代码，但我终生无法弄清楚或找到有关将 RGB 代码转换为合理的 XY 坐标以进行绘图的信息。

色轮 Canvas 代码示例:http://jsfiddle.net/yH6JE/

如果有人可以提供帮助，我希望答案是使用 Canvas 的原始 JS 和 HTML。这是我正在做的一个业余爱好项目，我想绘制平均 RGB 值和 Kmeans 质心来表示 kmeans 聚类(机器学习)只是为了给我的结果一个视觉表示而不是直接数据。

Answer 1

在这里查看 fork 的 fiddle :http://jsfiddle.net/havdto6e/4/

我做了两件事:

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

请注意，某些 RGB 值将绘制在与未表示值(“亮度”)相同的位置。在颜色选择器中，通常在单独的 slider 中选择值。
例如，这两种不同的颜色会出现在圆圈的同一个地方:

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