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

淡淡的烟草味﹌ 2024-04-18 09:35 9阅读 0赞

#### 背景 ####

开发大屏时遇到一个需求：需要由数值映射到颜色，具体表现为 0-100 分别对应由绿、黄、橙、红组成的渐变色的某段，即 10 应该对应绿黄之间的某个色值。  
![在这里插入图片描述][20190904185822227.png]

#### 预期 ####

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

#### 思路 ####

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

#### 代码实现 ####

[JS 获取渐变色][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), ...]

[20190904185822227.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c4c20580fd7d4f57a88181d1ce95799a.png
[JS]: https://github.com/Xiaoleng123/utils/blob/master/gradient/