摘要:十六進制格式,紅綠藍分別用兩位十六進制數表示。函數表達式,三原色分別由的整數值表示。開頭表示十六進制數,中不區分大小寫,至于不知道什么是十六進制的,請自行百度紅色是,綠色是,藍色。
前言
本篇主要講解關于計算機顏色系統的概念,后續結合一些canvas的應用。因為是“你不知道也沒關系”的邊緣知識,所以作為本系列教程的擴展,沒有興趣的同學可以跳過。
開始我們萬紫千紅的故事吧!
本人能力有限,歡迎牛人共同討論,批評指正。
我們熟悉的CSS風格顏色表示方式,大體有下面幾種,canvas大體是直接沿用這些寫法的,但最后包含透明度的寫法有些許不同。
#RRGGBB:十六進制格式,紅綠藍分別用兩位十六進制數表示。
#RGB:簡寫的十六進制格式,轉換成6位格式時會重復三原色,例如#fb0->#ffbb00。
rgb(R,G,B):函數表達式,三原色分別由0~255的整數值表示。
rgba(R,G,B,A):包含透明度的函數表達式,其中alpha參數為0~1,需要指定透明度的顏色必須使用該格式。
作為前端人員平時用得很多,但你可能會一臉懵逼之前自己寫的顏色字符串居然是十六進制?
待我細細道來。這里的R即是紅色(red),G即是綠色(green),B即是藍色(blue),這三個是顯示器普遍使用的三基色,屬于疊加型原色,百科摘錄如下。
【科普】原色是指不能透過其他顏色的混合調配而得出的“基本色”。解密顏色值
以不同比例將原色混合,可以產生出其他的新顏色。以數學的向量空間來解釋色彩系統,則原色在空間內可作為一組基底向量,并且能組合出一個“色彩空間”。由于人類肉眼有三種不同顏色的感光體,因此所見的色彩空間通常可以由三種基本色所表達,這三種顏色被稱為“三原色”。一般來說疊加型的三原色是紅色、綠色、藍色(又稱三基色,用于電視機、投影儀等顯示設備);而消減型的三原色是品紅色、黃色、青色(用于書本、雜志等的印刷)。
每一個顏色都是由三基色疊加合成,所以我們需要告訴計算機這各個基色的比例(濃度),將這個比例量化就是一個0~255的整數,也可說是256個級別,越大即表示各種原色更多(更濃)。
【PS】至于為什么是256個級別?
是因為計算機中每個原色用8位二進制(0或1)表示,也就是2的8次方共256。
每個顏色都是256個級別,那它的組合的可能就有256*256*256=16777216,換句話說,一個顏色用24位二進制表示,換算成十進制就是0~16777215。
這里你應該可以看懂上面CSS顏色表示方式前三個的含義了吧,至于rgba(R,G,B,A)多加入了A,表示透明度,這個是擴展版的32位顏色系統,多了一個額外的8位二進制表示透明度的級別,CSS將它簡化成0~1表示。
*
舉個例子吧!
以#FF55F3這個顏色為例進行講解。(0x開頭表示十六進制數,js中不區分大小寫,至于不知道什么是十六進制的,請自行百度)
紅色是0xFF,綠色是0x55,藍色0xF3。
轉換成十進制:紅色是255,綠色是85,藍色是243。也就是說這個數值和rgb(255,85,243)寫法是等價的。
【PS】簡便的轉換方法,直接在控制臺打印即可,比如console.log(0xF3);,js默認輸出十進制表示的字符串。顏色合成
顏色理論學得差不多了,現在來看看合成,已知三原色的值,要如何用代碼合成一個顏色呢?
以上面說的#FF55F3為例,現在已知的是各個顏色值,下面提供兩種做法:
直接利用js數字轉換為字符串時默認是十進制的特性。
let r = 0xFF; let g = 0x55; let b = 0xF3; let color = `rgb(${r},${g},${b})`;2、得到#RRGGBB格式
一個24位的顏色值,二進制即:RRRRRRRRGGGGGGGGBBBBBBBB
紅色值左移16位,綠色左移8位,將三者做“或”就能得到合成的24位顏色值,再轉成16進制字符串即可。
0xFF << 16 = 111111110000000000000000 0x55 << 08 = 000000000101010100000000 0xF3 = 000000000000000011110011 OR = 111111110101010111110011
//省略跟前面一樣的... let color = `#${(r << 16 | g << 8 | b).toString(16)}`;顏色分解
合成學完了,現在考慮一下如何用代碼分解顏色,也就是把一個顏色分離出紅、綠、藍。
rgb(R,G,B)格式就說了,切字符串就能得到。
重點討論#RRGGBB格式,其實就是第二種合成方法的逆過程,右移后“與“操作,簡單來說就是把想要的顏色值所在的位置移動到末尾,再用“與”0xFF剔除其他顏色。
還是以#FF55F3為例,現已知這個字符串,要求分解出三基色的值。
切除“#”號得到16進制字符串;
紅色:右移16位,與0xFF做“與”操作;
綠色:右移8位,與0xFF做“與”操作;
藍色:直接與0xFF做“與”操作。
let color = parseInt("#FF55F3".slice(1), 16); let r = color >> 16 & 0xFF let g = color >> 8 & 0xFF let b = color & 0xFF
以綠色提取過程為例:
0xFF55F3 = 111111110101010111110011 0xFF55F3 >> 8 = 000000001111111101010101 0xFF = 000000000000000011111111 AND = 000000000000000001010101封裝顏色工具
當然,上面的合成、分解代碼都是基本理論的應用,實際項目中使用會為了健壯性封裝成更加合理的工具,可以參考我們工具類utils.js中的colorToRGB()和parseColor()兩個函數。
colorToRGB()用于將#RRGGBB格式或任意數字,轉換成rgb(R,G,B)或rgba(R,G,B,A);
parseColor()用于將#RRGGBB格式轉成數字,將數字轉成#RRGGBB格式。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/93671.html
摘要:十六進制格式,紅綠藍分別用兩位十六進制數表示。函數表達式,三原色分別由的整數值表示。開頭表示十六進制數,中不區分大小寫,至于不知道什么是十六進制的,請自行百度紅色是,綠色是,藍色。 前言 本篇主要講解關于計算機顏色系統的概念,后續結合一些canvas的應用。因為是你不知道也沒關系的邊緣知識,所以作為本系列教程的擴展,沒有興趣的同學可以跳過。 開始我們萬紫千紅的故事吧! 本人能力有限...
摘要:前言本文是接續系列教程的,主要是介紹顏色系統在中的應用。本來是與一起成文的,因為莫名其妙的字數限制只能分割放送了。提供可以獲取畫布上任何一個像素,并可以自由的操作他們。繪制指定的位置繪制對象的內容。 前言 本文是接續系列教程的extra1,主要是介紹顏色系統在canvas中的應用。 本來是與extra1一起成文的,因為segmentfault莫名其妙的字數限制bug只能分割放送了。 ...
摘要:前言本文是接續系列教程的,主要是介紹顏色系統在中的應用。本來是與一起成文的,因為莫名其妙的字數限制只能分割放送了。提供可以獲取畫布上任何一個像素,并可以自由的操作他們。繪制指定的位置繪制對象的內容。 前言 本文是接續系列教程的extra1,主要是介紹顏色系統在canvas中的應用。 本來是與extra1一起成文的,因為segmentfault莫名其妙的字數限制bug只能分割放送了。 ...
閱讀 3019·2021-11-24 10:21
閱讀 1588·2021-10-11 10:57
閱讀 2803·2021-09-22 15:24
閱讀 2659·2021-09-22 14:58
閱讀 2331·2019-08-30 13:16
閱讀 3478·2019-08-29 13:05
閱讀 3411·2019-08-29 12:14
閱讀 3441·2019-08-27 10:55