描邊填充單一顏色

1. 前言

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

2. 填充純色

純色就是指只有一種顏色，這個和我們在寫 CSS 代碼時給標簽設定背景色是一樣的，我們來整理一下它們都有哪些寫法。

2.1 顏色字符串

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

使用：

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

2.2 十六進制顏色代碼

十六進制顏色代碼，在 RGB 顏色模式中，顏色由三個值表示，表示組件的強度，紅色、綠色和藍色。

從最小值0到最大值255，當所有顏色都以最小值顯示時，顏色為黑色，當所有顏色都以最大值顯示時，顏色為白色。

在寫法上是一個以“?！遍_頭的6位十六進制數(shù)值，6位數(shù)字分為3組，每組兩位，依次表示紅、綠、藍三種顏色的強度。

使用：

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

2.3 十六進制顏色代碼簡寫

十六進制顏色代碼中，每兩位代表 RGB 顏色中的一個值，當這兩位十六進制數(shù)字重復時，我們可以使用簡寫。

例如：黃色 #FFFF00 我們就可以簡寫成 #FF0。

使用：

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

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

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

使用：

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

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

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

使用：

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

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

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

因此人們設計出了 HSL 色彩空間，來更加直觀地表達顏色。HSL 是色相(Hue)、飽和度(Saturation)和亮度(Lightness)這三個顏色屬性的簡稱，具體內容我們就不做展開講解，想深入了解的同學可以自行搜索學習。

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

• H：Hue(色調)，0(或360)表示紅色，120表示綠色，240表示藍色，也可取其他數(shù)值來指定顏色，取值為：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() 方法設置顏色

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

使用：

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

3. 總結

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