/*
* @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
}
}
过渡颜色生成器
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。
推荐阅读更多精彩内容
- 模仿是学习CSS很快的捷径之一 临摹学习法(css) 找到好实例 用开发者工具分析 抄 删掉代码,重写 icon临...
- 通过列表生成式,我们可以直接创建一个列表。但是,受到内存限制,列表容量肯定是有限的。而且,创建一个包含100万个元...
- 在我们进行软件开发的时候,很多都只是单纯的增删查改,没有太大的技术含量但是却非常占据我们开发的时间,而且如果稍...
