js颜色渐变实现

/**
 *   颜色渐变
 *   num:颜色个数
 */
function fColorGradualChange(startColor, endColor, num) {
    var rgb = /^rgb|RGB\((([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5])),){2}([0-9]|[1-9]\d|1\d\d|2([0-4]\d|5[0-5]))\)$/;    //rgb
    var hex = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i; //16进制
    //颜色预处理
    var startRGB, endRGB;
    if (hex.test(startColor)) {
        startRGB = fAnalysisRGB(startColor);
    } else if (rgb.test(startColor)) {
        startRGB = startColor.substring(3, 15).split(',');
    }
    if (hex.test(endColor)) {
        endRGB = fAnalysisRGB(endColor);
    } else if (rgb.test(startColor)) {
        endRGB = endColor.substring(3, 15).split(',');
    }
    var startR = startRGB[0], startG = startRGB[1], startB = startRGB[2];
    var endR = endRGB[0], endG = endRGB[1], endB = endRGB[2];

    var sR = (endR - startR) / num;
    var sG = (endG - startG) / num;
    var sB = (endB - startB) / num;

    var colors = [];
    for (var i = 0; i < num; i++) {
        colors .push(fColorToHex(parseInt((sR * i + startR)), parseInt((sG * i + startG)), parseInt((sB * i + startB))));
    }
    return colors ;
}


/**
 *   解析rgb格式
 */
function fAnalysisRGB(color) {
    var color = color.toLowerCase().substring(1, color.length);
    var colors= [];
    colors.push(parseInt(color.substring(0, 2), 16))
    colors.push(parseInt(color.substring(2, 4), 16))
    colors.push(parseInt(color.substring(4, 6), 16))
    return colors;
}

/**
 *   rgb转hex
 */
function fColorToHex(r, g, b) {
    var hex = "#" + fAddZero(r.toString(16)) + fAddZero(g.toString(16)) + fAddZero(b.toString(16));
    return hex;
}

/**
 *   加0补位
 */
function fAddZero(v) {
    var newv = "00" + v;
    return newv.substring(newv.length - 2, newv.length);
}

 

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值