`
renyuan_1991
  • 浏览: 70605 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

获取渐变的颜色

js 
阅读更多
function getConversionedColor(StartColor, endColor, conversionProportion){
    startRGB = colorRgb(formateColor(StartColor));
    startR = startRGB[0];
    startG = startRGB[1];
    startB = startRGB[2];

    endRGB = colorRgb(formateColor(endColor));
    endR = endRGB[0];
    endG = endRGB[1];
    endB = endRGB[2];

    conversionProportion = formateConversionProportion(conversionProportion);
    sR = startR + ((endR-startR) * conversionProportion);//总差值
    sG = startG + ((endG-startG) * conversionProportion);
    sB = startB + ((endB-startB) * conversionProportion);

    return colorHex('rgb('+parseInt((sR))+','+parseInt((sG))+','+parseInt((sB))+')');;
}

function formateConversionProportion(conversionProportion) {
    let result = Number(conversionProportion);
    if(result.isNaN || result < 0 ){
        result = 0;
    }else if(result > 1){
        result = 1;
    }
    return result;
}

function formateColor(color){
    let myColor = String(color).replace("#", "");
    if(isEmptyString(myColor) || myColor.length < 6 || myColor.length > 8){
        myColor = "ffffff"
    } else {
        myColor = myColor.substring(myColor.length - 6, myColor.length);
    }
    return "#" + myColor;
}

// 将hex表示方式转换为rgb表示方式(这里返回rgb数组模式)
function colorRgb(sColor){
    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    let myColor = sColor.toLowerCase();
    if(myColor && reg.test(myColor)){
        if(myColor.length === 4){
            var sColorNew = "#";
            for(var i=1; i<4; i+=1){
                sColorNew += myColor.slice(i,i+1).concat(myColor.slice(i,i+1));
            }
            myColor = sColorNew;
        }
        //处理六位的颜色值
        let sColorChange = [];
        for(var i=1; i<7; i+=2){
            sColorChange.push(parseInt("0x"+myColor.slice(i,i+2)));
        }
        return sColorChange;
    }else{
        return myColor;
    }
}

// 将rgb表示方式转换为hex表示方式
function colorHex(rgb){
    let myRgb = rgb;
    let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    if(/^(rgb|RGB)/.test(myRgb)){
        let aColor = myRgb.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
        let strHex = "#";
        for(let i=0; i<aColor.length; i++){
            let hex = Number(aColor[i]).toString(16);
            hex = hex<10 ? 0+''+hex :hex;// 保证每个rgb的值为2位
            if(hex === "0"){
                hex += hex;
            }
            strHex += hex;
        }
        if(strHex.length !== 7){
            strHex = myRgb;
        }
        return strHex;
    }else if(reg.test(myRgb)){
        let aNum = myRgb.replace(/#/,"").split("");
        if(aNum.length === 6){
            return myRgb;
        }else if(aNum.length === 3){
            let numHex = "#";
            for(let i=0; i<aNum.length; i+=1){
                numHex += (aNum[i]+aNum[i]);
            }
            return numHex;
        }
    }else{
        return myRgb;
    }
}
0
0
分享到:
评论

相关推荐

    线性seekBar颜色获取渐变某点的颜色

    线性seekBar颜色获取渐变某点的颜色是一个在Android开发中常见的需求,特别是在设计自定义UI或者涉及到颜色选择器的应用时。在这个问题中,我们主要关注如何为SeekBar创建一个颜色渐变的效果,并能够动态地获取滑动...

    提取图片颜色生成背景渐变js代码

    在JavaScript的世界里,实现"提取图片颜色生成背景渐变"的功能是一种常见的图像处理技术,尤其在网页设计中,可以创建出独特的视觉效果。这个功能的核心在于解析图片的颜色信息,并利用这些信息来生成背景的渐变色。...

    VB渐变颜色模块代码

    在VB(Visual Basic)编程中,创建一个渐变颜色效果通常涉及到颜色混合和图形渲染的知识。这个"VB渐变颜色模块代码"很可能是为Visual Basic应用程序添加动态视觉效果的一个组件,使得窗口背景或图片框的填充色能够...

    android 界面 渐变背景颜色

    在Android开发中,渐变背景颜色是提升应用界面美观度的一种常见手法,它不仅能够增强视觉效果,还能根据不同的设计需求创造出丰富的层次感。本文将详细介绍如何在Android中实现渐变背景颜色,包括其基本原理、XML...

    ( 实例5 颜色渐变进度条

    在这个方法中,我们将获取设备上下文(CDC对象),然后使用GDI(Graphics Device Interface)函数填充渐变颜色。 颜色渐变的实现可以通过两种主要方法: 1. **线性渐变**:这是最常见的一种,颜色从一种颜色平滑...

    易语言窗口背景渐变颜色

    "易语言窗口背景渐变颜色"是一个特定的技术主题,它涉及到如何在易语言编程环境中改变窗口的背景色,使其呈现出从一种颜色平滑过渡到另一种颜色的效果。这种效果通常由图形设备接口(GDI)函数实现,它允许程序员...

    MFC实现颜色条渐变双色(蓝色变成绿色变成红色)

    实现过程中,你需要创建一个函数来生成渐变颜色的逻辑,然后在`OnPaint()`中调用这个函数。同时,不要忘记在每次绘图前清除设备上下文,以避免上一次的绘图残留。 6. **调试与测试** 在MFC项目中,你可以通过调整...

    颜色渐变颜色棒类mfc编写

    在MFC(Microsoft Foundation Classes)框架中开发颜色渐变颜色棒类是一项常见的任务,它涉及到图形用户界面(GUI)的设计和颜色处理。颜色渐变,也称为色彩过渡,是一种视觉效果,通过平滑地从一种颜色过渡到另一种...

    C#窗体 颜色渐变代码

    在C#编程中,创建颜色渐变效果是常见的任务,特别是在设计美观的Windows窗体应用程序时。颜色渐变可以用于背景、按钮或者其他图形元素,为用户提供更丰富的视觉体验。本篇将深入探讨如何在C#的Windows窗体应用中实现...

    vc6.0做的颜色渐变直线

    3. **定义颜色序列**:确定颜色渐变的起始颜色和结束颜色,以及过渡的步长。可以使用RGB函数或者`COLORREF`结构来表示颜色。 4. **计算渐变点**:根据颜色序列,计算出直线上的每一个颜色节点。这可以通过线性插值...

    对话框 设置窗体颜色渐变

    在本主题中,我们将探讨如何在VC6.0环境下为对话框设置窗体颜色渐变的效果。这个过程涉及到对MFC(Microsoft Foundation Classes)框架的理解以及Windows API的运用。 首先,窗体颜色渐变是指在窗口的背景色上应用...

    易语言颜色渐变

    4. **界面绘制**:在易语言中,你需要使用绘图命令来在屏幕上绘制这些渐变颜色,可能包括画布填充、线条绘制或者自定义控件的背景设置等。 5. **事件处理**:如果颜色渐变是动态的,那么可能需要响应用户的交互事件...

    Delphi7 及Delphi2010下用GDI+实现颜色渐变

    在本文中,我们将深入探讨如何在Delphi 7和Delphi 2010这两个不同的IDE环境下,利用GDI+库来实现颜色渐变的效果。GDI+是Microsoft开发的一个图形设备接口,提供了丰富的绘图功能,包括色彩处理、图像处理和矢量图形...

    颜色渐变从蓝色到红色

    根据给定的信息,本文将详细解释如何通过编程方式实现从蓝色到红色的颜色渐变,并具体说明如何使用 Delphi 语言来实现这一功能。 ### 颜色渐变基础 颜色渐变是指在两个或多个颜色之间平滑过渡的效果。在这个案例中...

    UIColor-uiGradientsAdditions, [iOS] Beautiful colors from uiGradients.zip

    除了直接获取渐变颜色,"UIColor-uiGradientsAdditions"可能还提供了创建渐变层的功能。通过`CAGradientLayer`,可以在界面上创建出平滑过渡的渐变效果。例如,可以使用以下代码创建一个渐变背景: ```swift let ...

    c++ 渐变算法......源码

    1. 获取用户选择的颜色一(Color1)和颜色二(Color2)。 2. 确定渐变的方向,这可以是水平、垂直或者任意角度。 3. 计算每个像素点的位置相对于起始和结束颜色的位置。这通常涉及到将像素坐标映射到[0, 1]的范围内...

    不用API函数实现的窗体颜色渐变.zip_渐变_窗体颜色渐变_颜色渐变

    在编程领域,窗体颜色渐变是一种常见的视觉效果,它能为用户界面增添动态和美感。这个主题“不用API函数实现的窗体颜色渐变”着重于如何在不依赖操作系统提供的API函数的情况下,通过编程语言自身的能力来创建这种...

    C#制作的渐变Button控件

    在这个场景中,我们讨论的是一个使用C#创建的特殊Button控件,它具有渐变颜色的效果。这个控件利用了GDI+(Graphics Device Interface Plus)技术,这是一个Windows Presentation Foundation (WPF)和Windows Forms...

    颜色渐变Progressbar

    5. 设置Paint对象的Shader属性为创建的Shader对象,这将使Paint使用渐变颜色进行绘制。 6. 使用Canvas的drawRect()方法,用带有渐变颜色的Paint绘制进度条的背景和当前进度。 7. 要考虑Progressbar的尺寸和方向,...

    C#实现winform渐变效果的方法

    在C#中实现WinForm的渐变效果,主要是通过调整窗体的`Opacity`属性来达到视觉上的渐变动画。`Opacity`属性决定了窗体的不透明度,其值范围是0到1,0表示完全透明,1表示完全不透明。在本文中,我们将探讨如何利用这...

Global site tag (gtag.js) - Google Analytics