js colorpicker实现
实现 JavaScript 颜色选择器的几种方法
使用 HTML5 原生 <input type="color">
HTML5 提供了原生颜色选择器支持，兼容现代浏览器：
<input type="color" id="colorPicker" value="#ff0000">通过 JavaScript 获取选择的值：
const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('input', (e) => {
console.log(e.target.value); // 输出十六进制颜色值
});使用第三方库（如 Spectrum）
Spectrum 是一个轻量级的颜色选择器库，支持高级功能：
安装：
npm install spectrum-colorpicker使用示例：
<input type="text" id="customPicker">
<script src="spectrum.js"></script>
<link rel="stylesheet" href="spectrum.css">
<script>
$("#customPicker").spectrum({
color: "#f00",
preferredFormat: "hex",
showInput: true
});
</script>自定义实现颜色选择器
创建一个基本的 HSV 颜色选择器：
<div id="colorArea" style="width:200px;height:200px;"></div>
<input type="range" id="hueSlider" min="0" max="360">
<div id="selectedColor" style="width:50px;height:50px;"></div>JavaScript 逻辑：
const colorArea = document.getElementById('colorArea');
const hueSlider = document.getElementById('hueSlider');
const selectedColor = document.getElementById('selectedColor');
hueSlider.addEventListener('input', updateColor);
colorArea.addEventListener('click', pickColor);
function updateColor() {
const hue = hueSlider.value;
colorArea.style.background = `hsl(${hue}, 100%, 50%)`;
}
function pickColor(e) {
const rect = colorArea.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const saturation = (x / rect.width) * 100;
const lightness = 100 - (y / rect.height) * 100;
selectedColor.style.background = `hsl(${hueSlider.value}, ${saturation}%, ${lightness}%)`;
}使用 Canvas 实现高级选择器
通过 Canvas 绘制渐变颜色选择区域：
<canvas id="colorCanvas" width="256" height="256"></canvas>JavaScript 代码：
const canvas = document.getElementById('colorCanvas');
const ctx = canvas.getContext('2d');
// 创建水平饱和度渐变
const satGradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
satGradient.addColorStop(0, 'white');
satGradient.addColorStop(1, `hsl(0, 100%, 50%)`);
// 创建垂直明度渐变
const lightGradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
lightGradient.addColorStop(0, 'transparent');
lightGradient.addColorStop(1, 'black');
ctx.fillStyle = satGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = lightGradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);颜色格式转换函数
实现常用颜色格式转换：
function hexToRgb(hex) {
const r = parseInt(hex.slice(1, 3), 16);
const g = parseInt(hex.slice(3, 5), 16);
const b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
function rgbToHsl(r, g, b) {
r /= 255, g /= 255, b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h * 360, s * 100, l * 100];
}
