章节索引 :

描边填充单一颜色

1. 前言

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

2. 填充纯色

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

2.1 颜色字符串

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

颜色 颜色字符串 对应的十六进制颜色
Black #000000
Green #008000
Silver #C0C0C0
Lime #00FF00
Gray #808080
Olive #808000
White #FFFFFF
Yellow #FFFF00
Maroon #800000
Navy #000080
Red #FF0000
Blue #0000FF
Purple #800080
Teal #008080
Fuchsia #FF00FF
Aqua #00FFFF

使用:

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 以及如何进行设定。下一小节我们将学习如何填充渐变色。