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

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

R,G,B values to HTML hex(十六進制) notation。

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

<dl></dl>

<dt></dt>

函數式RGB顔色

<dd>計算機可以通過組合不同的紅色、綠色和藍色來創造顔色，是以紅、綠、藍就被叫做顔色分量，每個顔色分量都是8bit，取值範圍為0-255</dd>

十六進制RGB顔色

<dd>But the HTML color specification uses hexadecimal notation for each of the components, so that they each occupy two digits.就是說因為是十六進制，是以用兩位就能使的它的取值範圍在0-255了。它的格式為#RRGGBB</dd>

<dt>兩者的聯系</dt>

<dd></dd>

Component

Value(in hex)

Value(in decimal)

Red

AA

170

Green

BB

187

Black

CC

204

可以在中看到它寫了一個函數RGB2Color，可以實作把RGB轉換成十六進制。

RGB2Color

<dd>  function RGB2Color(r,g,b)</dd>

{

<dd>  return ‘#‘ + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);</dd>

}

<dt>交給byte2Hex函數執行，這個函數很有趣</dt>

<dd>  function byte2Hex(n)</dd>

<dd>{</dd>

<dd>  var nybHexString = "0123456789ABCDEF";</dd>

<dd>  return String(nybHexString.substr((n &gt;&gt; 4) &amp; 0x0F,1)) + nybHexString.substr(n &amp; 0x0F,1);</dd>

<dd>叫我寫這個方法，我覺得我想破腦袋都想不出來還可以這樣子玩的</dd>

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

(n&gt;&gt;4)&amp;0x0F

<dd>比如我們傳來的是值為180，你用(180).toString(2)可以獲得它對應的二進制為"10110100"，然後你用180&gt;&gt;4執行後為11。是以我們用n&gt;&gt;4是為了擷取該值對應二進制的最左邊4位的值，然後再用&amp;0x0F把它轉換成16進制，而得出來的值是對于nybHexString字元串的下标的，即11對應的是B就找出來了。</dd>

<dt>n&amp;0x0F </dt>

<dd>這個可以擷取n最右邊的值對應的16進制，因為0x0F如果用8位表示的是0000 1111，接上面的例子如180，用二進制表示為1011 0100，因為兩者是相與的，而0x0F最左邊的4位全是0，而最右邊4位全為1，是以我們就可以忽略掉每一個值對應的二進制的最左邊的4個位，擷取的是每一個值(n)對應的二進制最右邊的4個位。</dd>