前两天接到了一个好玩(奇怪)的需求，记录一下吧。

需求描述

原始需求是这样的：

1. 提供一个颜色选择器，用户可以使用颜色选择器选择任意一个颜色，暂且把这个颜色记作当前色；
2. 根据当前色生成一个渐变色；
3. 这个渐变色的渐变规则是这样的：
   起始：当前色遮罩60%透明度的白色——>中间：当前色——>结束：当前色遮罩60%透明度的黑色。
4. 后面这个渐变色将会应用到一些其他的dom元素，后续就不多描述了，本次需求重点是生成这个渐变色。

应该，，，，懂我的意思吧，不懂的话我再上个图:

想法及实现

这个渐变色emmmmm有点，之前我实现的渐变色也有奇怪的，比如从一个颜色的某个亮度渐变到另外一个亮度。一般情况下还是比较常规的从一个透明度渐变到另外一个透明度。
看到这个渐变规则后我直接：啊这。。。。。

经过一系列的。。。。之后。咳咳，中间过程不多描述，后来采用coco大佬的思路，此处先感谢前端Coco大佬，他的主页

1. 创建一个canvas；
2. 在canvas指定位置画一个点或者其他任何东西，指定颜色为当前色；
3. 再在同一个位置画白色或者黑色遮罩层，同样大小就行；
4. 吸取canvas这个位置的当前颜色即为所求渐变的起始或终点色。

不得不说，canvas很强大！

基础版只实现渐变色，代码如下：

代码可以简化，思路是这样的，最后加上颜色选择器，效果如下：

完整版代码：

结尾

这是一个尴尬又不失礼貌的结尾，感谢观看！！！！