javascript把RGB指定色彩轉換成十六進位顏色(Converting R,G,B values to HTML hex notation)

Prologue

看見一篇很好的外國文章，Making annoying rainbows in javascript,其實我當時很想把它翻譯下來的，但是對於一個連六級都沒過的人確實有點難度，一些文段看起來是知道意思但是就不知道怎麼用自己的話來表達。越來越覺得對於IT行業來說英語至少要達到能讀的程度，畢竟好的東西很多是外國的，還有哦，要會翻牆。對於那篇文章我其實還沒看完，還在慢慢消化中，但是看到一個函數確實真的很吸引我，實現的是Converting R,G,B values to HTML hex(十六進位) notation。

Perface

當你看見這張照片時，你在想什嗎？對於文藝青年可能想放飛夢想，自由飛翔，對於二逼青年可能會想氣球可不可以帶我飛？(好像不太符合角色特點-_-!)。但是程式猿會想為什麼電腦會顯示這些顏色？確實豐富的色彩豐富我們的生活，我們要的是五彩繽紛的世界而不是只有黑白。怎麼感覺在寫作文啊！離題了。

description函數式RGB顏色 電腦可以通過組合不同的紅色、綠色和藍色來創造顏色，所以紅、綠、藍就被叫做顏色分量，每個顏色分量都是8bit，取值範圍為0-255十六進位RGB顏色 But the HTML colZ喎?http://www.bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vciBzcGVjaWZpY2F0aW9uIHVzZXMgaGV4YWRlY2ltYWwgbm90YXRpb24gZm9yIGVhY2ggb2YgdGhlIGNvbXBvbmVudHMsIHNvIHRoYXQgdGhleSBlYWNoIG9jY3VweSB0d28gZGlnaXRzLr7NysfLtdLyzqrKx8quwfm9+NbGo6zL+dLU08PBvc67vs3E3Mq5tcTL/LXEyKEmIzIwNTQwO7e2zqfU2jAtMjU1wcuho8v8tcQmIzI2Njg0O8q9zqojUlJHR0JCwb3V37XEwarPtQo8dGFibGUgYm9yZGVyPQ=="1">ComponentValue(in hex)Value(in decimal)RedAA170GreenBB187BlackCC204Content

可以在Making annoying rainbows in javascript中看到它寫了一個函數RGB2Color，可以實現把RGB轉換成十六進位。

RGB2Color function RGB2Color(r,g,b){ return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);} 交給byte2Hex函數執行，這個函數很有趣 function byte2Hex(n){ var nybHexString = "0123456789ABCDEF"; return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);} 叫我寫這個方法，我覺得我想破腦袋都想不出來還可以這樣子玩的Summary

現在我們來分析那段代碼，其實我經常在看《javascript權威指南》總是忽略掉位元運算符的，今天看來我之前的習慣是錯的

(n>>4)&0x0F 比如我們傳來的是值為180，你用(180).toString(2)可以獲得它對應的二進位為"10110100"，然後你用180>>4執行後為11。所以我們用n>>4是為了擷取該值對應二進位的最左邊4位的值，然後再用&0x0F把它轉換成16進位，而得出來的值是對於nybHexString字串的下標的，即11對應的是B就找出來了。n&0x0F 這個可以擷取n最右邊的值對應的16進位，因為0x0F如果用8位表示的是0000 1111，接上面的例子如180，用二進位表示為1011 0100，因為兩者是相與的，而0x0F最左邊的4位全是0，而最右邊4位全為1，所以我們就可以忽略掉每一個值對應的二進位的最左邊的4個位，擷取的是每一個值(n)對應的二進位最右邊的4個位。preferencesMaking annoying rainbows in javascript