简易 js调色板

<canvas id="colorPalette" width="300" height="300"></canvas>
<script>
  const canvas = document.getElementById('colorPalette');
  const ctx = canvas.getContext('2d');

  for (let i = 0; i < canvas.width; i++) {
    for (let j = 0; j < canvas.height; j++) {
      const r = Math.floor((i / canvas.width) * 255);
      const g = Math.floor((j / canvas.height) * 255);
      const b = 150;
      ctx.fillStyle = `rgb(${r},${g},${b})`;
      ctx.fillRect(i, j, 1, 1);
    }
  }

  canvas.addEventListener('click', (event) => {
    const rect = canvas.getBoundingClientRect();
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    const imageData = ctx.getImageData(x, y, 1, 1).data;
    const selectedColor = `rgb(${imageData[0]},${imageData[1]},${imageData[2]})`;
    console.log('Selected color:', selectedColor);
  });
</script>