描邊填充單一顏色

1. 前言

我們已經(jīng)學(xué)習(xí)了路徑的描邊和填充，本小節(jié)就來(lái)整理一下我們平時(shí)在描邊和填充時(shí)設(shè)定純色的方法。

2. 填充純色

純色就是指只有一種顏色，這個(gè)和我們?cè)趯?xiě) CSS 代碼時(shí)給標(biāo)簽設(shè)定背景色是一樣的，我們來(lái)整理一下它們都有哪些寫(xiě)法。

2.1 顏色字符串

在 HTML 規(guī)范中，總共規(guī)定了16個(gè)顏色字符串，它們分別是：

使用：

ctx.strokeStyle = "yellow"
ctx.fillStyle = "yellow"

2.2 十六進(jìn)制顏色代碼

十六進(jìn)制顏色代碼，在 RGB 顏色模式中，顏色由三個(gè)值表示，表示組件的強(qiáng)度，紅色、綠色和藍(lán)色。

從最小值0到最大值255，當(dāng)所有顏色都以最小值顯示時(shí)，顏色為黑色，當(dāng)所有顏色都以最大值顯示時(shí)，顏色為白色。

在寫(xiě)法上是一個(gè)以“?！遍_(kāi)頭的6位十六進(jìn)制數(shù)值，6位數(shù)字分為3組，每組兩位，依次表示紅、綠、藍(lán)三種顏色的強(qiáng)度。

使用：

ctx.strokeStyle = "#FFFF00"
ctx.fillStyle = "#FFFF00"

2.3 十六進(jìn)制顏色代碼簡(jiǎn)寫(xiě)

十六進(jìn)制顏色代碼中，每?jī)晌淮?RGB 顏色中的一個(gè)值，當(dāng)這兩位十六進(jìn)制數(shù)字重復(fù)時(shí)，我們可以使用簡(jiǎn)寫(xiě)。

例如：黃色 #FFFF00 我們就可以簡(jiǎn)寫(xiě)成 #FF0。

使用：

ctx.strokeStyle = "#FF0"
ctx.fillStyle = "#FF0"

2.4 使用 rgb() 方法設(shè)置顏色

rgb(r,g,b) 方法是 HTML 里面定義的一個(gè)函數(shù)，有三個(gè) Number 參數(shù)：R、G、B，分別表示 RGB 顏色的一種，取值范圍是 0～255，這里的取值和十六進(jìn)制顏色代碼是對(duì)應(yīng)的，只不過(guò)是將十六進(jìn)制數(shù)字換算成了十進(jìn)制表示。

使用：

ctx.strokeStyle = "rgb(255,255,0)"
ctx.fillStyle = "rgb(255,255,0)"

2.5 使用rgba()方法設(shè)置顏色

rgba(r,g,b,f) 方法和 rgb() 方法類(lèi)似，有四個(gè) Number 參數(shù)：R、G、B、F，前三個(gè)分別表示RGB顏色的一種，取值范圍是 0～255，第四個(gè)參數(shù)表示透明度，取值范圍是 0～1。

使用：

ctx.strokeStyle = "rgba(255,255,0,0.5)"
ctx.fillStyle = "rgba(255,255,0,0.5)"

2.6 使用 hls() 方法設(shè)置顏色

在 RGB 顏色模型下，任何一種顏色，都是由紅(Red)、綠(Green)、藍(lán)(Blue)三原色以不同的比例相加而成的。但是 RGB 顏色模型對(duì)人類(lèi)并不友好，比如我說(shuō)一種顏色是由60%紅，30%綠和90%藍(lán)組成的，你應(yīng)該很難想象出來(lái)，這到底是哪種顏色。

因此人們?cè)O(shè)計(jì)出了 HSL 色彩空間，來(lái)更加直觀地表達(dá)顏色。HSL 是色相(Hue)、飽和度(Saturation)和亮度(Lightness)這三個(gè)顏色屬性的簡(jiǎn)稱(chēng)，具體內(nèi)容我們就不做展開(kāi)講解，想深入了解的同學(xué)可以自行搜索學(xué)習(xí)。

hls(H,S,L) 方法有三個(gè)參數(shù)，分別是：

• H：Hue(色調(diào))，0(或360)表示紅色，120表示綠色，240表示藍(lán)色，也可取其他數(shù)值來(lái)指定顏色，取值為：0 ~ 360。
• S：Saturation(飽和度)，取值為：0.0% ~ 100.0%。
• L：Lightness(亮度)，取值為：0.0% ~ 100.0%。

使用：

ctx.strokeStyle = "hls(60,50%,50%)"
ctx.fillStyle = "hls(60,50%,50%)"

2.7 使用 hlsa() 方法設(shè)置顏色

hlsa() 方法和 hls() 方法類(lèi)似，只是多了一個(gè)表示透明度的參數(shù)。

使用：

ctx.strokeStyle = "hlsa(60,50%,50%,0.5)"
ctx.fillStyle = "hlsa(60,50%,50%,0.5)"

3. 總結(jié)

本小節(jié)我們主要學(xué)習(xí)了在 canvas 中描邊和填充單一顏色的七種方法，也了解了 RGB 和 HLS 以及如何進(jìn)行設(shè)定。下一小節(jié)我們將學(xué)習(xí)如何填充漸變色。