使用canvas实现一个基于vue的颜色选择器

先看看最终效果：

效果图

组件已开源

git地址：https://gitee.com/chenfency/el-color-picker.git
npm安装：npm i el-color-picker --save

html布局部分

首先左边的颜色选择控制条跟右边的颜色选择区域为了选中时能获取当前位置的颜色色值，所以使用canvas实现，下边透明度控制条只需要控制透明度百分比，所以可直接使用div布局实现

html部分

左侧颜色控制条的绘制

使用canvas的createLinearGradient方法创建一个线性渐变，然后填充到x=0,y=0的位置，填充宽度为20px，填充高度为canvas高度

绘制左侧面板颜色选择条

canvas右侧颜色区域绘制

同样使用canvas的createLinearGradient方法，这一部分分为两步填充完成
第一次填充为从左到右填充，填充颜色为白色到当前选中颜色，颜色透明度均为1，即100%
第二次填充为从上到下填充，填充颜色均为黑色，颜色透明度为从0到1，即0%到100%
两次填充即完成canvas右侧颜色选择部分绘制

绘制颜色选择区域

颜色控制条、透明度控制条、颜色面板上的小方块拖动方法的实现

这里采用的方法是，当鼠标按下时，给document的onmouseup和onmousemove方法赋值，onmouseup绑定的函数的作用是清除document.onmousemove方法，避免鼠标键弹起时依然触发onmousemove方法，拖动方法则在onmousemove实现
下图仅展示透明度控制方法，颜色控制条、颜色面板上的小方块拖动实现原理一样

透明度控制

从canvas上获取当前选中的颜色

实现原理为canvas的getImageData方法，可以获取画布上指定矩形的像素数据，imgData对象中的每个像素，都存在着四方面的信息，即 RGBA 值，imgData.data为一个数组，前4个元素分别代码像素的R、G、B、A，后面的数据以此类推。所以我们只需要知道当前选中的xy值，y值乘以imgData.width，再加上x值，所得结果乘以4，即可获取选中点在imgData.data像素数据对应的索引。关键点在于理解getImageData方法的返回值，以及dataIndex = (pos.y * imgData.width + pos.x) * 4;

获取rgb

色值格式的转换

颜色互相转换方法