js中RGB值与16进制颜色值进行互转

2021-07-26 01:00:07 阅读：265 来源： 互联网

今天在调试 konva.js 源码的时候发现作者用js位运算实现RGB值与16进制颜色值进行互转，这里进行下下分析并记录：

计算机如何表示 RGB 颜色值

一个像素用RGB表示的话占用3个几节，一共的位数为 3*8 = 24（RGB24），2进制表示为 RRRRRRRR GGGGGGGG BBBBBBBB，16进制表示为 RR GG BB
此外还有用32位表示一个像素的的（RGB32 我们一般在css中会使用遮罩的颜色值：比如 RGBA(0,0,0,.5)）2进制表示为 AAAAAAAA RRRRRRRR GGGGGGGG BBBBBBBB，16进制表示为 AA RR GG BB,（A表示透明通道）

// 16进制转RGB值
function _hexToRgb(hex) {
    hex = hex.replace(HASH$1, EMPTY_STRING$1); // HASH$1 = '#' ; EMPTY_STRING$1 = ''
    var bigint = parseInt(hex, 16);
    return {
        r: (bigint >> 16) & 255,
        g: (bigint >> 8) & 255,
        b: bigint & 255,
    };
},

// RGB值转16进制
// 其实 （(r << 16) + (g << 8) + b).toString(16)已经可以了，为什么前边还要加个 (1 << 24) 再做处理
// 解释：为了防止 r，g，b值全为 0 的特殊情况， ((1 << 24))的值二进制表示为 100...0(1后边有24个0），加上r（0），g（0），b（0），结果不变， ((1 << 24)).toString(16) 的值为 "1000000"
// 这块跟生成一个随机的16进行颜色值的处理类似，考虑到了 #000000（我们平常使用简写为 #000） 的极端特殊情况，函数如: getRandomColor
function _rgbToHex(r, g, b) {
    return ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},

/**
 * return random hex color
 * @method
 * @memberof Konva.Util
 * @example
 * shape.fill(Konva.Util.getRandomColor());
 */
function getRandomColor() {
    var randColor = ((Math.random() * 0xffffff) << 0).toString(16);
    // 如果 randColor 的长度不够6位，说明生成的16进制数值 < 2 ** 24,我们需要在高位补0
    while (randColor.length < 6) {
        randColor = ZERO + randColor; // ZERO  = '0'
    }
    return HASH$1 + randColor; // HASH$1 = '#'
},

// 生成随机rgb值的函数
function getRandomColor1() {
   const r = Math.round(Math.random() * 255);
   const g = Math.round(Math.random() * 255);
   const b = Math.round(Math.random() * 255);

   return `rgb(${r},${g},${b})`;
}

参考资料

标签：进制,16,hex,js,RGB,bigint,互转,255
来源： https://www.cnblogs.com/hanshuai/p/15059600.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

js中RGB值与16进制颜色值进行互转

参考资料