在 中，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 值及其对应的颜色：
--------- -- -- -- -- -- -- ------- ---- -- -- -- -- -- ------- -- ---- -- -- -- -- --------- ---- -- -- -- -- -- --------- -- ---- -- -- -- -- ------- ---- ---- -- -- -- -- --------- ---- ---- -- -- -- -- ------- -- -- -- -- -- --
在 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。以下示例创建了一个按钮和一个 ，当点击按钮时，会更改 的填充颜色：
------- ----------------------- --------------
------- ------------- ----------- ----------------------
--------
----- ------ - ------------------------------------
----- --- - ------------------------
---------------------------------------------------------------- --------------- -
------------- - ---------- -- -- ------
--------------- -- ---- -----
---
---------在这个示例中，我们添加了一个按钮，并为其添加了一个 click
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25815