js colorpicker实现
实现 JavaScript 颜色选择器的几种方法
使用 HTML5 原生 <input type="color">
HTML5 提供了原生颜色选择器控件，兼容现代浏览器：
<input type="color" id="colorPicker" value="#ff0000">通过 JavaScript 获取值：
document.getElementById('colorPicker').addEventListener('input', function(e) {
console.log('Selected color:', e.target.value); // 输出十六进制颜色值
});使用第三方库（如 Spectrum）
Spectrum 是一个轻量级的颜色选择器插件：
- 引入库文件：
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.1/spectrum.min.js"></script> - 初始化颜色选择器：
$("#colorPicker").spectrum({ color: "#f00", preferredFormat: "hex", showInput: true });
自定义实现颜色选择器
创建自定义颜色选择器需要以下组件：
<div class="color-picker">
<div class="color-palette"></div>
<input type="text" class="color-value">
</div>JavaScript 逻辑示例：
// 生成色板
const palette = document.querySelector('.color-palette');
const colors = ['#FF0000', '#00FF00', '#0000FF', /* 更多颜色 */];
colors.forEach(color => {
const swatch = document.createElement('div');
swatch.style.backgroundColor = color;
swatch.addEventListener('click', () => {
document.querySelector('.color-value').value = color;
});
palette.appendChild(swatch);
});使用 Canvas 实现高级选择器
通过 Canvas 可以创建更复杂的颜色选择器：
const canvas = document.getElementById('colorCanvas');
const ctx = canvas.getContext('2d');
// 创建颜色渐变
const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, '#FF0000');
gradient.addColorStop(1, '#00FF00');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 添加点击事件
canvas.addEventListener('click', function(e) {
const x = e.offsetX;
const y = e.offsetY;
const pixel = ctx.getImageData(x, y, 1, 1).data;
const color = `rgb(${pixel[0]}, ${pixel[1]}, ${pixel[2]})`;
console.log('Selected color:', color);
});响应式颜色选择器实现
结合 CSS 变量实现实时预览：
const colorPicker = document.getElementById('colorPicker');
colorPicker.addEventListener('input', () => {
document.documentElement.style.setProperty('--theme-color', colorPicker.value);
});配套 CSS：
:root {
--theme-color: #ffffff;
}
body {
background-color: var(--theme-color);
}注意事项
- 移动端兼容性需要考虑触摸事件处理
- 颜色值转换可能需要额外库（如 RGB 转 HSL）
- 可访问性需添加 ARIA 标签和键盘导航支持
- 性能优化对于复杂选择器需使用 requestAnimationFrame
