使用 canvas 实现 js 取渐变色某段色值

背景

开发大屏时遇到一个需求：需要由数值映射到颜色，具体表现为 0-100 分别对应由绿、黄、橙、红组成的渐变色的某段，即 10 应该对应绿黄之间的某个色值。

预期

传入所需渐变的色值，返回一个可取色的对象，调用此对象的取色方法，传入需要的色段即可获得该段的色值。

思路

1. 创建 canvas，初始化 context；
2. 使用传入的色值，通过 createLinearGradient 函数创建渐变色；
3. 使用创建的渐变色填充一个矩形；
4. 获取该矩形的 ImageData 数据；
5. 创建颜色数组 colors，4个一组存储 ImageData；
6. colors 对应索引的值即为所需颜色。

代码实现

JS 获取渐变色，期待您的 star 与 issue。

使用方式

/*
 * @param colors 需要变为渐变色的色值数组，支持 rgb、rgba、hex 等标准颜色表示方式
 * @param count 需要将渐变色分为多少段，default: 100
 * @return Gradient实例
 */ 
constructor(colors, count = 100) {/* ... */}

/*
 * @param 无
 * @return 转变后的渐变色数组
 */ 
getColors() {/* ... */}

/*
 * @param index 需要获取色段的索引
 * @return 渐变色数组对应 index 位置的色值
 */ 
getColor(index) {/* ... */}

// 使用示例
import Gradient from '@/models/Gradient'

const gradient = new Gradient(['rgba(0,128,0,1)', 'yellow', 'rgb(255,165,0)', '#ff0000'])
console.log(gradient.getColor(12)) // rgba(93, 174, 0, 255)
console.log(gradient.getColor(22)) // rgba(172, 213, 0, 255)
console.log(gradient.getColors()) // (100) [Array(4), ...]