修改色轮

Question

我正在尝试制作一个色轮，我找到了 this，但我需要它看起来像这样：

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

水平翻转
添加边框

这些显然可以通过 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;
    }
  }

JSFiddle

(function() {

  // Declare constants and variables to help with minification
  // Some of these are inlined (with comments to the side with the actual equation)
  var doc = document;
  doc.c = doc.createElement;
  b.a = b.appendChild;

  var width = c.width = c.height = 400,
    input = b.a(doc.c("input")),
    imageData = a.createImageData(width, width),
    pixels = imageData.data,
    oneHundred = input.value = input.max = 100,
    circleOffset = 10,
    diameter = width - circleOffset * 2,
    radius = diameter / 2,
    radiusSquared = radius * radius,
    two55 = 255,
    currentY = oneHundred,
    wheelPixel = circleOffset * 4 * width + circleOffset * 4;

  // Math helpers
  var math = Math,
    PI = math.PI,
    PI2 = PI * 2,
    sqrt = math.sqrt,
    atan2 = math.atan2;


  // Load color wheel data into memory.
  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;
    }
  }
  a.putImageData(imageData, 0, 0);

  function 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;

    return [r, g, b, "rgb(" + ~~r + "," + ~~g + "," + ~~b + ")"];
  }
})();

<canvas id="c"></canvas>
<script>
  var b = document.body;
  var c = document.getElementsByTagName('canvas')[0];
  var a = c.getContext('2d');
</script>

Answer 1

我成功了：

将 rx 的定义从 x - radius 反转为 radius - x 以水平翻转
添加 CSS 边框并将 border-radius 设置为 100% 使其成为圆形
将 circleOffset 设置为零以移除色轮与其边框之间的 space。

(function() {

  var doc = document,
      b = doc.body,
      c = doc.getElementsByTagName('canvas')[0],
      a = c.getContext('2d')
      doc.c = doc.createElement,
      b.a = b.appendChild,
      
      width = c.width = c.height = 175,
      imageData = a.createImageData(width, width),
      pixels = imageData.data,
      circleOffset = 0,
      diameter = width - circleOffset * 2,
      radius = diameter / 2,
      radiusSquared = radius * radius,
      two55 = 255,
      wheelPixel = circleOffset * 4 * width + circleOffset * 4,
        
      math = Math,
      PI = math.PI,
      PI2 = PI * 2,
      sqrt = math.sqrt,
      atan2 = math.atan2;


  // Load color wheel data into memory.
  for (y = 0; y < width; y++) {
    for (x = 0; x < width; x++) {
      
      var rx = radius - x,
          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;
      
    }
  }
  a.putImageData(imageData, 0, 0);

  function 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;

    return [r, g, b, "rgb(" + ~~r + "," + ~~g + "," + ~~b + ")"];
  }
  
})();

#c {
  border: 1px solid #000;
  border-radius: 100%;
}

<canvas id="c"></canvas>

修改色轮

Modify Color Wheel

javascript

color-wheel

JSFiddle