/*
* @Author: hope.deng
* @Date: 2019-12-18 16:34:37
* @LastEditors : hope.deng
* @LastEditTime : 2019-12-19 14:57:27
* @Description: 获取颜色 colors 颜色范围内的 count 个 过渡颜色
*/
export default {
getColors (count, colors) {
const canvas = document.createElement('canvas')
canvas.setAttribute('width', count)
canvas.setAttribute('height', 20)
const ctx = canvas.getContext('2d')
const gradient = ctx.createLinearGradient(0, 0, count, 0)
const per = 1 / (colors.length - 1)
for (let i = 0; i < colors.length; i++) {
gradient.addColorStop(i * per, colors[i])
}
ctx.fillStyle = gradient
ctx.fillRect(0, 0, count, 1)
const imageData = ctx.getImageData(0, 0, count, 1).data
const cls = []
for (let i = 0; i < imageData.length; i += 4) {
cls.push(`rgb(${imageData[i]},${imageData[i + 1]},${imageData[i + 2]})`)
}
return cls
}
}
过渡颜色生成器
最新推荐文章于 2021-11-11 16:43:12 发布