Javascript 修改色轮

我想做一个色轮，我发现了，但我需要它看起来像这个：

下面是我的代码。我认为唯一需要改变的是：

• 水平翻转
• 添加边框

这些显然可以通过CSS来完成，但我想编辑代码并从那里进行更改。如何进行上述更改

相关代码

for (y = input.min = 0; y < width; y++) {
    for (x = 0; x < width; x++) {
      var rx = x - radius,
        ry = y - radius,
        d = rx * rx + ry * ry,
        rgb = hsvToRgb(
          (atan2(ry, rx) + PI) / PI2, // Hue
          sqrt(d) / radius, // Saturation
          1 // Value
        );

      // Print current color, but hide if outside the area of the circle
      pixels[wheelPixel++] = rgb[0];
      pixels[wheelPixel++] = rgb[1];
      pixels[wheelPixel++] = rgb[2];
      pixels[wheelPixel++] = d > radiusSquared ? 0 : two55;
    }
  }

（y=input.min=0；y{ 对于（x=0；xradiusSquared？0:two55； } }

（函数（）{
//声明常量和变量以帮助缩小
//其中一些是内联的（在带有实际等式的一侧有注释）
var doc=单据；
doc.c=doc.createElement；
b、 a=b.1；
变量宽度=c.宽度=c.高度=400，
输入=b.a（文件c（“输入”）），
imageData=a.createImageData（宽度，宽度），
像素=imageData.data，
一百=input.value=input.max=100，
圆偏移=10，
直径=宽度-圆偏移*2，
半径=直径/2，
半径平方=半径*半径，
two55=255，
当前Y=100，
wheelPixel=圆偏移*4*宽度+圆偏移*4；
//数学助手
var math=数学，
PI=math.PI，
PI2=PI*2，
sqrt=math.sqrt，
atan2=数学。atan2；
//将色轮数据加载到内存中。
对于（y=input.min=0；yradiusSquared？0:two55；
}
}
a、 putImageData（imageData，0,0）；
功能hsvToRgb（h、s、v）{
h*=6；
var i=~~h，
f=h-i，
p=v*（1-s），
q=v*（1-f*s），
t=v*（1-（1-f）*s），
mod=i%6，
r=[v，q，p，p，t，v][mod]*two55，
g=[t，v，v，q，p，p][mod]*two55，
b=[p，p，t，v，v，q][mod]*two55；
返回[r，g，b，“rgb（“+~~r+”，“+~~g+”，“+~~b+”）；
}
})();

var b=document.body；
var c=document.getElementsByTagName（'canvas'）[0]；
var a=c.getContext（'2d'）；
我的成功在于：

将
rx
的定义从
x-radius
反转为
radius-x
以水平翻转
添加CSS边框，并将
边框半径设置为100%，使其成为圆形

将圆圈偏移设置为零，以消除色轮与其边框之间的空间

（函数（）{
var doc=文件，
b=文件正文，
c=doc.getElementsByTagName（'canvas'）[0]，
a=c.getContext（'2d'）
doc.c=doc.createElement，
b、 a=b，
宽度=c.宽度=c.高度=175，
imageData=a.createImageData（宽度，宽度），
像素=imageData.data，
circleOffset=0，
直径=宽度-圆偏移*2，
半径=直径/2，
半径平方=半径*半径，
two55=255，
wheelPixel=圆偏移*4*宽度+圆偏移*4，
数学=数学，
PI=math.PI，
PI2=PI*2，
sqrt=math.sqrt，
atan2=数学。atan2；
//将色轮数据加载到内存中。
对于（y=0；yradiusSquared？0:two55；
}
}
a、 putImageData（imageData，0,0）；
功能hsvToRgb（h、s、v）{
h*=6；
var i=~~h，
f=h-i，
p=v*（1-s），
q=v*（1-f*s），
t=v*（1-（1-f）*s），
mod=i%6，
r=[v，q，p，p，t，v][mod]*two55，
g=[t，v，v，q，p，p][mod]*two55，
b=[p，p，t，v，v，q][mod]*two55；
返回[r，g，b，“rgb（“+~~r+”，“+~~g+”，“+~~b+”）；
}
})();
#c{
边框：1px实心#000；
边界半径：100%；
}
谢谢！css不支持hsl吗？为什么作者必须将其转换为rgb？如何将其更改为HSL？（而不是rgb）我还没有真正使用canvas，所以我真的不知道该怎么做。这些值需要转换为rgb，因为
imageData.data
array for
表示“包含RGBA顺序数据的一维数组”。看见如果您感兴趣，请参阅。