根据起始颜色和步长计算渐变颜色列表

/*

*@param startColor 开始颜色

* @param endColor 结束颜色

* @steps 步数

* @return colorList 结果颜色列表

*/

function calcLinearColor(start, end, steps) {

      const colorList = [];

      let startR = parseInt(start.slice(1, 3), 16);

      let endR = parseInt(end.slice(1, 3), 16) - startR;

      let startG = parseInt(start.slice(3, 5), 16);

      let endG = parseInt(end.slice(3, 5), 16) - startG;

      let startB = parseInt(start.slice(5, 7), 16);

      let endB = parseInt(end.slice(5, 7), 16) - startB;

      for(var i = 0; i < steps; i++) {

        let r = Math.round(startR + (endR / steps * i));

        let g = Math.round(startG + (endG / steps * i));

        let b = Math.round(startB + (endB / steps * i));

        r = r.toString(16).padStart(2, '0').toUpperCase();

        g = g.toString(16).padStart(2, '0').toUpperCase();

        b = b.toString(16).padStart(2, '0').toUpperCase();

        colorList.push(`#${r.toString(16)}${g.toString(16)}${b.toString(16)}`);

      }

      return colorList;

    }

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • js语言学习 1.基本概念: 1.js是区分大小写的 2.标识符命名规则: 第一个字符必须是一个字母、下划线(_)...
    NSQAQ阅读 1,331评论 1 17
  • CSS CSS3 布局属性 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 !importan...
    53cfdb355418阅读 465评论 0 0
  • 内置对象 我们平时忙于开发,很少有时间能够将文档看一遍。这样在很多时候,我们本可以一个原生方法能够实现的程序,却累...
    汨逸阅读 384评论 0 0
  • 简介 ECMAScript是JavaScript的标准,JavaScript实现了ECMAScript,ECMAS...
    Zindex阅读 495评论 0 1
  • 基本类型 类型检测 typeof 用于返回 原始类型 number/string/boolean 及 funcit...
    zbeiping阅读 271评论 0 0