描边填充单一颜色

1. 前言

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

2. 填充纯色

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

2.1 颜色字符串

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

使用：

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

2.2 十六进制颜色代码

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

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

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

使用：

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

2.3 十六进制颜色代码简写

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

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

使用：

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

2.4 使用 rgb() 方法设置颜色

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

使用：

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

2.5 使用rgba()方法设置颜色

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

• H：Hue(色调)，0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色，取值为：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() 方法类似，只是多了一个表示透明度的参数。

使用：

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

3. 总结

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