今天在調試 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})`;
}