示例1 - canvas图片颜色选择器html： css: 图片: js: 至此功能已完成，点击和悬浮时可以把该点的颜色

html：

<body onload="draw()">
    <div class="d1">
      <canvas id="c" width="300" height="227"></canvas>
      <div class="d" id="hovered-color"></div>
      <div class="d" id="selected-color"></div>
    </div>
 </body>

css:

.d {
      height: 200px;
      width: 200px;
    }

 .d1 {
   display: flex;
   justify-content: center;
 }

图片:

js:

let img = new Image()
img.src = './pic.png'
let c = document.getElementById('c')
let ctx = c.getContext('2d')

img.onload = function(){
  // 把加载好的图片绘制到canvas上
  ctx.drawImage(img, 0 , 0)
  // 创建的img元素不显示
  img.style.display = 'none'
}

// 鼠标悬浮时
let hoveredColor = document.getElementById('hovered-color');
// 鼠标点击时
let selectedColor = document.getElementById('selected-color');

// hover or click
function pick(e, destination){
  let x = e.layerX;
  let y = e.layerY;
  let pixel = ctx.getImageData(x, y, 1, 1);
  let data = pixel.data;
  
  /**
  * data[0] - data[3] 分别表示鼠标处于当前canvas的(x,y)位置时像素点的rgba中的r、g、b、alpha*255值。
  */
  
  const rgba = `rgba(${data[0]}, ${data[1]}, ${data[2]}, ${data[3] / 255})`;
  /* 将rgba值展示出来 */
  destination.style.background = rgba
  destination.textContent = rgba
  
  return rgba;
}

c.addEventListener('mousemove', function (e) {
  pick(e, hoveredColor);
});

c.addEventListener('click', function (e) {
  pick(e, selectedColor, true);
});

至此功能已完成，点击和悬浮时可以把该点的颜色数据放到两个div中。如下图：