如何以角度制作颜色方块 - JavaScript

在这篇文章中，我们将介绍如何使用 JavaScript 在 HTML 页面中创建一个颜色方块。我们将使用角度来指定颜色，并动态改变颜色方块的颜色。

HTML 结构

我们的 HTML 结构非常简单，只需要一个 <div> 元素即可。

<div id="color-box"></div>

CSS 样式

为了让 <div> 元素变成一个正方形的颜色方块，我们需要使用 CSS 样式来实现。

#color-box {
  width: 100px;
  height: 100px;
  background-color: #000000;
}

在这里，我们将 <div> 的宽度和高度都设置为 100 像素，并将背景颜色设置为黑色。

JavaScript 代码

现在我们将编写 JavaScript 代码来动态改变颜色方块的颜色。我们将使用角度值来指定颜色，并将其转换为 RGB 值来设置颜色。

const colorBox = document.getElementById("color-box");

function setColor(angle) {
  const hue = angle % 360;
  const saturation = 100;
  const lightness = 50;

  const rgb = hslToRgb(hue, saturation, lightness);
  const color = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;

  colorBox.style.backgroundColor = color;
}

function hslToRgb(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;

  let r, g, b;

  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1 / 6) return p + (q - p) * 6 * t;
      if (t < 1 / 2) return q;
      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;

    r = hue2rgb(p, q, h + 1 / 3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1 / 3);
  }

  return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}

在 setColor() 函数中，我们首先将角度值对 360 取模，然后将饱和度和亮度都设置为固定值。接着，我们将通过 hslToRgb() 函数将 HSL 值转换成 RGB 值。最后，我们将 RGB 值转换成 CSS 颜色值，并设置为颜色方块的背景色。

在 hslToRgb() 函数中，我们将 HSL 颜色值转换成 RGB 颜色值。该函数的实现方式是参照 MDN 文档 中的算法实现的。

测试

我们现在可以在 JavaScript 中使用 setColor() 函数来改变颜色方块的颜色了。例如，以下代码将颜色方块的颜色设置为红色：

setColor(0);

我们也可以继续改变角度值来动态改变颜色方块的颜色。例如，以下代码将颜色方块的颜色从红色到绿色的过渡：

for (let i = 0; i < 360; i += 1) {
  setTimeout(() => {
    setColor(i);
  }, i * 10);
}

结论

在本文中，我们学习了如何使用 JavaScript 在 HTML 页面中创建一个颜色方块，并使用角度来指定颜色。我们还介绍了如何使用 HSL 颜色值将颜色转换成 RGB 颜色值，并将其设置为颜色方块的背景色。