千里之堤，非一日之寒。抽了点摸鱼的时间重看了canvas的api，这次自己造轮子辣。

在做画板的时候就想着做画笔的颜色设置了，这次做个画板拾色器刚好配上。

思路是根据canvas的getImageData方法来获取canvas对应像素的rgba值，步骤如下：

1. 渲染一个色彩渐变的画板

   这里用到createLinearGradient方法来对颜色进行渐变处理。

   // 定义渐变起止点
   const colorBland = ctx.createLinearGradient(0, 0, 480, 300)
   // 增加颜色变换
   colorBland.addColorStop(0, 'white')
   colorBland.addColorStop(0.25, 'red')
   colorBland.addColorStop(0.375, 'yellow')
   colorBland.addColorStop(0.5, 'green')
   colorBland.addColorStop(0.625, 'blue')
   colorBland.addColorStop(0.75, 'violet')
   colorBland.addColorStop(1, 'black')
   // 设置上下文颜色样式
   ctx.fillStyle = colorBland
   // 绘制矩形
   ctx.fillRect(0, 0, 480, 300)
   

2. 颜色获取

   // 颜色获取
       let ncolor=''
       let getcolor = (ev) => {
           // 获取偏移值
           let rangx=get(canvas)
           // 根据偏移值去设定坐标
           let point = {
               x: ev.clientX-rangx.left,
               y: ev.clientY-rangx.top
           }
           let color =ctx.getImageData(point.x,point.y,1,1).data
           ncolor='rgba:('+color[0]+','+color[1]+','+color[2]+',1)'
           mycolor.style.backgroundColor='rgba('+color[0]+','+color[1]+','+color[2]+',1)'
       }
   

3. 事件监听

   准备工作完成后对鼠标位置进行监听，根据鼠标位置去得到颜色值

    // 进入选择状态
       canvas.addEventListener('mousedown',()=>{
           canvas.addEventListener('mousemove',getcolor)
       })
       // 移除选定状态
       canvas.addEventListener('mouseup',()=>{
           canvas.removeEventListener('mousemove',getcolor)
       })
   
   
   

4. 坐标偏移

   由于我的canvas并不是在屏幕的原点位置（屏幕左上角坐标为（0,0)），所以在不同屏幕的分辨率下canvas的初始坐标可能是不同的（因为canvas不是在屏幕坐标的起点）这会导致读取的坐标和在canvas上的坐标不一致。所以需要对坐标进行偏移处理，保证鼠标在canvas的左上角是（0，0）

   // 获取canvas元素坐标偏移值
       function get(canvas){
           let top=canvas.offsetTop
           let left=canvas.offsetLeft
           var current=canvas.offsetParent
           while(current!==null){
               top+=current.offsetTop
               left+=current.offsetLeft
               current=current.offsetParent
           }
           return {
               top,left
           }
       }
   

效果预览

代码地址

该页面已遗失在重构中... 2023.07.03