在 HTML5 中，我们可以使用 <canvas> 元素来绘制图形，动画等。其中，fillStyle 属性用于设置绘制图形时的填充颜色。在本文中，我将详细介绍 fillStyle 属性的用法及示例。
基本语法
fillStyle 属性是 <canvas> 元素的上下文对象（context）的一个属性，用于设置填充颜色。其基本语法如下：
context.fillStyle = color;
其中，color 可以是以下几种形式之一：
- 颜色名称，如
"red","blue","green"等 - 十六进制颜色值，如
#FF0000,#00FF00,#0000FF等 - RGB 颜色值，如
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255)等 - RGBA 颜色值，如
rgba(255, 0, 0, 0.5),rgba(0, 255, 0, 0.5),rgba(0, 0, 255, 0.5)等
示例
下面是一个简单的示例，演示如何在 canvas 中绘制一个填充颜色为红色的矩形：
-- -------------------- ---- -------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
-- ---------
------------- - ------
-- ------
---------------- --- --- ----
---------在这个示例中，我们首先获取了 <canvas> 元素和其上下文对象 ctx，然后设置 fillStyle 属性为 "red"，最后使用 fillRect 方法绘制了一个填充颜色为红色的矩形。
渐变填充
除了纯色填充，我们还可以使用渐变填充来美化图形。以下是一个线性渐变填充的示例：
-- -------------------- ---- -------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
-- ------
--- -------- - --------------------------- -- ---- ---
------------------------ -------
------------------------ --------
-- ---------
------------- - ---------
-- ------
---------------- --- --- ----
---------在这个示例中，我们首先使用 createLinearGradient 方法创建了一个线性渐变对象 gradient，然后通过 addColorStop 方法添加了两个颜色停止点，最后将 fillStyle 属性设置为 gradient，实现了一个从红色到蓝色的线性渐变填充效果。
总结
通过本文的介绍，你应该已经了解了 fillStyle 属性的基本用法以及如何实现纯色填充和渐变填充。希望这些知识可以帮助你更好地使用 HTML5 <canvas> 元素进行前端开发。如果你有任何疑问或建议，欢迎在下方留言讨论。谢谢阅读！