在 <canvas> 中，fillStyle 是用于定义填充颜色的属性。默认情况下，可以使用 CSS 颜色名称、十六进制值或 RGB 值来设置 fillStyle。但是，对于那些需要更精细控制颜色和透明度的情况，使用 RGBA 值则更为方便。本文将介绍如何在 JavaScript 中以编程方式使用 RGBA 值设置 fillStyle。
RGBA 值的含义
RGB 表示红、绿、蓝三种颜色的强度值，取值范围为 0-255。RGBA 加上了一个表示透明度的 alpha 值，取值范围同样为 0-255，其中 0 表示完全透明，255 表示完全不透明。因此，RGBA 值的形式为 rgba(red, green, blue, alpha)。
以下是一些常见的 RGBA 值及其对应的颜色：
rgba(255, 0, 0, 1) /* 红色 */ rgba(0, 255, 0, 1) /* 绿色 */ rgba(0, 0, 255, 1) /* 蓝色 */ rgba(255, 255, 0, 1) /* 黄色 */ rgba(255, 0, 255, 1) /* 紫色 */ rgba(0, 255, 255, 1) /* 青色 */ rgba(255, 255, 255, 1) /* 白色 */ rgba(0, 0, 0, 1) /* 黑色 */
在 JavaScript 中设置 fillStyle
要在 JavaScript 中设置 fillStyle，只需将颜色值赋给 canvas 对象的 fillStyle 属性即可。例如，在以下示例中，我们创建了一个红色正方形：
-- -------------------- ---- ------- ------- ------------- ----------- ---------------------- -------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ------------- - ------ --------------- -- ---- ----- ---------
但是，如果你想使用 RGBA 值来创建半透明的效果，该怎么办呢？其实很简单，只需要将颜色值改为 rgba(red, green, blue, alpha) 的形式即可。例如，以下示例创建了一个半透明的蓝色正方形：
-- -------------------- ---- ------- ------- ------------- ----------- ---------------------- -------- ----- ------ - ------------------------------------ ----- --- - ------------------------ ------------- - -------- -- ---- ------ --------------- -- ---- ----- ---------
在这个示例中，我们将 fillStyle 设置为 "rgba(0, 0, 255, 0.5)"，表示蓝色半透明。其中 alpha 值为 0.5，表示半透明。最终效果如下：
动态更改 fillStyle
除了在初始化时设置 fillStyle，还可以在运行时动态更改 fillStyle。以下示例创建了一个按钮和一个 <canvas>，当点击按钮时，会更改 <canvas> 的填充颜色：
-- -------------------- ---- -------
------- ----------------------- --------------
------- ------------- ----------- ----------------------
--------
----- ------ - ------------------------------------
----- --- - ------------------------
---------------------------------------------------------------- --------------- -
------------- - ---------- -- -- ------
--------------- -- ---- -----
---
---------在这个示例中，我们添加了一个按钮，并为其添加了一个 click
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/25815