我们已经学习了路径的描边和填充，本小节就来整理一下我们平时在描边和填充时设定纯色的。

纯色就是指只有一种颜色，这个和我们在写 CSS 时给设定背景色是一样的，我们来整理一下它们都有哪些写法。

在 HTML 规范中，总共规定了16个颜色字符串，它们分别是：

使用：

ctx.Style = "yellow"
ctx.fillStyle = "yellow"

十六进制颜色，在 RGB 颜色模式中，颜色由三个值表示，表示组件的强度，红色、绿色和蓝色。

从最小值0到最大值255，当所有颜色都以最小值时，颜色为黑色，当所有颜色都以最大值时，颜色为白色。

在写法上是以“＃”开头的6位十六进制数值，6位数字分为3组，每组两位，依次表示红、绿、蓝三种颜色的强度。

使用：

ctx.Style = "#FFFF00"
ctx.fillStyle = "#FFFF00"

十六进制颜色中，每两位代表 RGB 颜色中的值，当这两位十六进制数字重复时，我们可以使用简写。

例如：黄色 #FFFF00 我们就可以简写成 #FF0。

使用：

ctx.Style = "#FF0"
ctx.fillStyle = "#FF0"

rgb(r,g,b) 是 HTML 里面定义的，有三个 Number 参数：R、G、B，分别表示 RGB 颜色的一种，取值范围是 0～255，这里的取值和十六进制颜色是对应的，只不过是将十六进制数字换算成了十进制表示。

使用：

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

rgba(r,g,b,f) 和 rgb() 类似，有四个 Number 参数：R、G、B、F，前三个分别表示RGB颜色的一种，取值范围是 0～255，第四个参数表示透明度，取值范围是 0～1。

使用：

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

在 RGB 颜色模型下，任何一种颜色，都是由红(Red)、绿(Green)、蓝(Blue)三原色以不同的比例相加而成的。但是 RGB 颜色模型对人类并不友好，比如我说一种颜色是由60%红，30%绿和90%蓝组成的，你应该很难想象出来，这到底是哪种颜色。

因此人们设计出了 HSL 色彩空间，来更加直观地表达颜色。HSL 是色相(Hue)、饱和度(Saturation)和亮度(Lightness)这三个颜色的简称，具体我们就不做展开讲解，想深入了解的同学可以自行学习。

hls(H,S,L) 有三个参数，分别是：

使用：

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

hlsa() 和 hls() 类似，只是多了表示透明度的参数。

使用：

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

本小节我们主要学习了在 canvas 中描边和填充单一颜色的七种，也了解了 RGB 和 HLS 以及如何进行设定。下一小节我们将学习如何填充渐变色。