当前位置：首页 > JavaScript

js实现色谱

2026-02-01 04:26:07JavaScript

实现色谱的基本方法

使用JavaScript实现色谱可以通过多种方式完成，包括基于Canvas、SVG或CSS的方案。以下是几种常见的实现方法：

Canvas绘制色谱 通过HTML5 Canvas可以动态生成色谱。创建一个渐变对象，填充颜色范围，然后绘制到Canvas上。

const canvas = document.createElement('canvas');
canvas.width = 360;
canvas.height = 100;
const ctx = canvas.getContext('2d');

const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.17, 'yellow');
gradient.addColorStop(0.34, 'green');
gradient.addColorStop(0.51, 'cyan');
gradient.addColorStop(0.68, 'blue');
gradient.addColorStop(0.85, 'magenta');
gradient.addColorStop(1, 'red');

ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
document.body.appendChild(canvas);

HSL颜色空间生成 利用HSL颜色模型可以更简单地生成连续色谱。HSL中的Hue值从0到360正好对应完整的色相环。

js实现色谱

function createHSLColorBar(width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');

  for(let x = 0; x < width; x++) {
    const hue = (x / width) * 360;
    ctx.fillStyle = `hsl(${hue}, 100%, 50%)`;
    ctx.fillRect(x, 0, 1, height);
  }

  return canvas;
}

document.body.appendChild(createHSLColorBar(360, 50));

交互式色谱选择器

可以扩展基本色谱实现为颜色选择器，添加交互功能获取用户选择的颜色值。

添加点击事件获取颜色

js实现色谱

const colorPicker = createHSLColorBar(360, 50);
colorPicker.addEventListener('click', (e) => {
  const x = e.offsetX;
  const hue = Math.round((x / colorPicker.width) * 360);
  const selectedColor = `hsl(${hue}, 100%, 50%)`;
  console.log('Selected color:', selectedColor);
});

显示当前选择颜色

const preview = document.createElement('div');
preview.style.width = '100px';
preview.style.height = '100px';

colorPicker.addEventListener('mousemove', (e) => {
  const x = e.offsetX;
  const hue = Math.round((x / colorPicker.width) * 360);
  preview.style.backgroundColor = `hsl(${hue}, 100%, 50%)`;
});

document.body.appendChild(colorPicker);
document.body.appendChild(preview);

高级色谱变体

亮度/饱和度调节 可以通过添加控制滑块来调整颜色的亮度和饱和度，创建更复杂的颜色选择器。

const saturationSlider = document.createElement('input');
saturationSlider.type = 'range';
saturationSlider.min = '0';
saturationSlider.max = '100';
saturationSlider.value = '100';

const lightnessSlider = document.createElement('input');
lightnessSlider.type = 'range';
lightnessSlider.min = '0';
lightnessSlider.max = '100';
lightnessSlider.value = '50';

function updatePreview() {
  const hue = getCurrentHue(); // 从色谱获取当前色相
  const saturation = saturationSlider.value;
  const lightness = lightnessSlider.value;
  preview.style.backgroundColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}

saturationSlider.addEventListener('input', updatePreview);
lightnessSlider.addEventListener('input', updatePreview);

RGB与HSL转换 实现颜色空间转换函数可以在不同表示之间切换。

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];
}

这些方法提供了从基础色谱实现到交互式颜色选择器的完整解决方案，可以根据具体需求进行调整和扩展。