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

Question

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

Rak*_*Ram 8 html color-picker colors colorbox

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

我试过制作行和列,但它不是那么舒服,所以希望它像一个颜色选择器

你可以看看颜色框我是如何尝试的:

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

Answer 1

Sel*_*vam 10

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

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

Run Code Online (Sandbox Code Playgroud)

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

Answer 2

Gil*_*ain 9

选项＃1-本机HTML颜色选择器

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

<input type="color" />

Run Code Online (Sandbox Code Playgroud)

选项＃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%，它将使画布变圆，因此仅会激发圆内的单击，而忽略边缘的单击（在下一步中我们将需要click事件）。
在您的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

Бог*_*ець 8

另外，对于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()

Run Code Online (Sandbox Code Playgroud)

* {
  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%;
}

Run Code Online (Sandbox Code Playgroud)

<html>

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

</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，7 月前
查看次数：	13185 次
最近记录：	7 年，7 月前