使用javascript创建colorwheel

我试图找到一种方法来创建一个类似于以下内容的色轮：，在JS中。色轮应具有单个像素大小的~4096（*）个元素，其颜色通过CSS

background

规则设置

我知道这不是创建颜色选择器的方式，通常情况下，任何东西都不应该有这么多单像素DOM元素你不需要告诉我这些，也不需要想办法解决这些问题。

我还想让每个像素大小的元素左对齐，而不是绝对定位

（x） ：4096是所有速记十六进制代码（#XXX）的数目，但色轮没有单色值，只有白色。因此，唯一颜色的实际数量为4081（？）

---

这是我设法想出的代码（几乎没有）：

正如你所看到的，这与我想要的相去甚远。因此，任何帮助都将不胜感激，因为我对如何实现这一点感到非常困惑。我有颜色，但我不知道如何把它们排列成一个轮子

---

编辑：
除非有人碰巧给了我一个非常完整的解决方案，这似乎是有点超过我的技能水平，在目前。所以我愿意接受（我认为）更容易实现的东西

---

基本上，另一种可以接受的输出形式是这样的：

问题是，您正在将一个三轴系统（R，G，B）映射到一个两轴系统（x，y）上。在colorwheel示例中，三个轴绘制为一个圆，仅使用x和y坐标很难创建此坐标，特别是当要求像素（div）左对齐时

实现这一点的最佳方法是创建具有颜色值的三维数组，将其映射到二维数组，然后从左到右和自顶向下循环该二维数组

像这样：

var p = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
for(var i = 0; i < p.length; i++)
{
    for(var j = 0; j < p.length; j++)
    {
        for(var k = 0; k < p.length; k++)
        {
            var x = i - k * 0.5;
            var y = j - k * 0.25;
            background[x][y] = "#" + p[i] + p[j] + p[k];
        }
    }
}

for (var l = 0; l < maxX; l++)
{
    for (var m = 0; m < maxY; m++)
    {
        document.write('<div style="background:#' + background[x][y] +'"></div>');
    }
}

var p=['0'，'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'a'，'b'，'c'，'d'，'e'，'f']；
对于（变量i=0；i

---

这不是一个完整的答案，只是解决这个问题的可能的第一步。也许这可以帮助您创建一个好的解决方案。

问题是您正在将一个三轴系统（R、G、B）映射到一个两轴系统（x、y）上。在colorwheel示例中，三个轴绘制为一个圆，仅使用x和y坐标很难创建此坐标，特别是当要求像素（div）左对齐时

实现这一点的最佳方法是创建具有颜色值的三维数组，将其映射到二维数组，然后从左到右和自顶向下循环该二维数组

像这样：

var p = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
for(var i = 0; i < p.length; i++)
{
    for(var j = 0; j < p.length; j++)
    {
        for(var k = 0; k < p.length; k++)
        {
            var x = i - k * 0.5;
            var y = j - k * 0.25;
            background[x][y] = "#" + p[i] + p[j] + p[k];
        }
    }
}

for (var l = 0; l < maxX; l++)
{
    for (var m = 0; m < maxY; m++)
    {
        document.write('<div style="background:#' + background[x][y] +'"></div>');
    }
}

var p=['0'，'1'，'2'，'3'，'4'，'5'，'6'，'7'，'8'，'9'，'a'，'b'，'c'，'d'，'e'，'f']；
对于（变量i=0；i

---

这不是一个完整的答案，只是解决这个问题的可能的第一步。也许这可以帮助您创建一个好的解决方案。

我之前发布了一个答案，该答案依赖于浏览器将颜色从HSL颜色空间转换为RGB颜色空间。不幸的是，这种方法虽然简单，却无法生成所示的图像

为了正确地产生所需的输出，一个简单得多的方法是使用HSV颜色模型，该模型与HSL颜色模型非常相似

当我们使用正确的颜色空间时，为任何给定的像素确定正确的颜色是一个简单的问题，只需插值3个值——所有值都会线性变化（变化量保持不变。一端为0，另一端为1意味着它们之间的中间点为0.5）

首先，让我们看看您想要的输出，以及我们的HSV输入是如何随X和Y坐标变化的。我们将从更容易可视化和创建的平面条开始

扁平条

我们可以观察到这幅图像的以下情况：

色调范围从左边缘的0到右边缘的360

sat的范围从顶部边缘的0到顶部边缘中间的1 &底部边缘。超过1的点，它被钳制为1

val的范围从顶部和底部中间的0到顶部的1 底部。在点为0之前，它被钳制为0

现在，让我们看一下同一张图片的轮子表示

色轮

如果你仔细观察，你会发现，当把色带绕成一个圆圈时，它会产生色轮。车轮的中心与钢带的上边缘相对应，外边缘与下边缘相对应

这也是我们如何显示您显示的原始轮子是颜色空间的一种不精确表示，因为它的左边缘有红色。基本上，您的图像已水平翻转。；）

好的，这显示了图像与HSV颜色空间的关系。接下来，我们真的需要能够动态创建它们。这是相当直截了当的，现在我们已经有了如何进行的计划

一旦完成了，我们就结束了

var p = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'];
for(var i = 0; i < p.length; i++)
{
    for(var j = 0; j < p.length; j++)
    {
        for(var k = 0; k < p.length; k++)
        {
            var x = i - k * 0.5;
            var y = j - k * 0.25;
            background[x][y] = "#" + p[i] + p[j] + p[k];
        }
    }
}

for (var l = 0; l < maxX; l++)
{
    for (var m = 0; m < maxY; m++)
    {
        document.write('<div style="background:#' + background[x][y] +'"></div>');
    }
}