html - 如何在html中创建颜色选择器？

Question

如何制作一个颜色选择器，就像我们在不同的网站上看到的那样，用户可以向下滚动不同的颜色，然后点击可以获得颜色代码？

我试过制作行和列，但不太舒服所以希望它像颜色选择器一样

你可以看看我试过的颜色框:

我已经回答了不同的问题，但我无法解决这个问题。

Answer 1

选项 #1 - 原生 HTML 颜色选择器

如前面的答案所述，您可以使用 native HTML 颜色选择器元素:

<input type="color" />

有关详细信息，请参阅:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

选项 #2 - 第 3 方颜色选择器

如果 Native 颜色选择器不符合您的标准，因为它看起来已经过时并且看起来不如现代颜色选择器那么漂亮，您可以使用网络上数百种颜色选择器中的一种。即使是在 NPM 包页面上进行简单的搜索，也会返回数百个结果供您选择。
https://www.npmjs.com/search?q=color%20picker

选项 #3 - 构建您自己的颜色选择器

如果你喜欢我，并且在长时间搜索颜色选择器库之后，你没有找到符合你条件的选择器，你可以构建你的颜色选择器，这不会花费太长时间，正如我将演示的那样。

1. 找到一个色轮图像作为您的选择器，例如:
   (实际应用中可能需要更复杂的色轮)
   

2. 在您的 .html 文件中，创建一个 canvas元素。
   
   

<canvas id="colorCanvas" class="color-canvas" width="250" height="250"></canvas>

1. 给出 Canvas 元素border-radius: 50% ，这将使 Canvas 变圆，因此只会触发圆圈内的点击，边缘的点击将被忽略(我们将在接下来的步骤中需要点击事件)。

2. 在您的 JavaScript 中，使用颜色选择器图像初始化 Canvas ，并监听点击事件

function initColorPicker()
{
    var canvasEl = document.getElementById('colorCanvas');
    var canvasContext = canvasEl.getContext('2d');

    var image = new Image(250, 250);
    image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height); 
    image.src = "./images/myColorPickerImage.png";

    canvasEl.onclick = function(mouseEvent) 
    {
      var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1);
      var rgba = imgData.data;

      alert("rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")");
    }
}