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

Question

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

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

您可以查看颜色框我是如何尝试的：

我遇到了不同的问题，但我无法解决这个问题。

Answer 1

您只需按<input>创建一个颜色选择器，其类型为颜色。但它仅适用于现代浏览器。

<input name="Color Picker" type="color"/>

预览https://jsfiddle.net/itsselvam/9sL7s7ox/

Answer 2

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

如先前的回答所述，您可以使用本机HTML颜色选择器元素：

<input type="color" />

选项＃2-第三方颜色选择器

如果“本机”颜色选择器不符合您的标准，因为它的外观过时且看起来不如现代“颜色选择器”那么圆滑，因此您可以在网络上使用数百种颜色选择器之一。即使在NPM软件包页面上进行简单搜索，也将返回数百个结果以供选择。
https://www.npmjs.com/search?q=color%20picker

选项＃3-建立自己的拾色器

如果您喜欢我，并且在漫长的颜色选择器库搜索之后，没有找到符合您条件的选择器，则可以构建颜色选择器，而我将不需要花费太多时间。

查找将要用作选择器的色轮图像，例如：
（实际应用中可能需要的更复杂的色轮）
在.html文件中，创建一个canvas元素。

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

给出canvas元素border-radius: 50%，这将使canvas变为圆形，因此仅触发圆内的单击，而忽略边缘的单击（下一个需要单击事件）步骤）。
在您的JavaScript中，使用颜色选择器图像初始化画布，并监听点击事件


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] + ")");
    }
}

Answer 3

除了回答Gil Epshtain外，如果您不想加载图像，可以用渐变填充画布

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

  let gradient = canvas.getContext('2d').createLinearGradient(0, 0, canvas.width, 0)
  gradient.addColorStop(0, '#ff0000')
  gradient.addColorStop(1 / 6, '#ffff00')
  gradient.addColorStop((1 / 6) * 2, '#00ff00')
  gradient.addColorStop((1 / 6) * 3, '#00ffff')
  gradient.addColorStop((1 / 6) * 4, '#0000ff')
  gradient.addColorStop((1 / 6) * 5, '#ff00ff')
  gradient.addColorStop(1, '#ff0000')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(255, 255, 255, 1)')
  gradient.addColorStop(0.5, 'rgba(255, 255, 255, 0)')
  gradient.addColorStop(1, 'rgba(255, 255, 255, 0)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)

  gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height)
  gradient.addColorStop(0, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(0.5, 'rgba(0, 0, 0, 0)')
  gradient.addColorStop(1, 'rgba(0, 0, 0, 1)')
  canvas.getContext('2d').fillStyle = gradient
  canvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height)


  canvas.onclick = function(e) {
  	console.log()
    var imgData = canvasContext.getImageData((e.offsetX / canvas.clientWidth) * canvas.width, (e.offsetY / canvas.clientHeight) * canvas.height, 1, 1)
    var rgba = imgData.data;
    var color = "rgba(" + rgba[0] + ", " + rgba[1] + ", " + rgba[2] + ", " + rgba[3] + ")";
    console.log("%c" + color, "color:" + color)
  }
}

initColorPicker()

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
  width: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
}

canvas {
  height: 100%;
  width: 100%;
}

<html>

  <body>
    <canvas id="colorCanvas" class="color-canvas" width="100%" height="100%"></canvas>
  </body>

</html>

Answer 4

您可以使用类型作为颜色来创建颜色选择器。但它仅适用于现代浏览器。

请勿使用拾色器。关于它做什么，它是超随机的，旧的浏览器将它变成常规输入，新的浏览器随机输入。你最好的选择是像我一样做，并选择一个Javascript颜色选择器或创建自己的颜色选择器。我被迫创建自己的，因为所有当前的选择器都是特定于项目的。

Answer 5

尝试以下操作：

<input name="clr" type="color">

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

5 个答案:

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

选项＃2-第三方颜色选择器

选项＃3-建立自己的拾色器