在 HTML Canvas 中，fill() 方法用于填充绘制的图形。这个方法可以让我们在 Canvas 上创建各种颜色和样式的填充效果。在本文中，我将详细介绍 fill() 方法的用法以及一些示例代码。
基本用法
fill() 方法是 Canvas 2D 上下文的方法之一，用于填充当前路径。在使用 fill() 方法之前，我们需要先绘制一个路径。绘制路径的方法包括画线、画圆、画矩形等。
下面是一个简单的示例，演示如何使用 fill() 方法填充一个矩形：
--------- -----
------
------
------------- ---- ---------------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
------------- - ------
---------------- --- ---- ----
-----------
---------
-------
-------在这个示例中，我们首先获取 Canvas 元素和上下文对象，然后设置填充颜色为红色，绘制一个矩形并调用 fill() 方法进行填充。
设置填充样式
除了填充颜色外，我们还可以设置填充样式，包括渐变、图案等。下面是一个使用线性渐变填充矩形的示例：
--------- -----
------
------
------------- -------- ---- ---------------
-------
------
------- ------------- ----------- ----------------------
--------
--- ------ - ------------------------------------
--- --- - ------------------------
--- -------- - --------------------------- -- ---- ---
------------------------ --------
------------------------ ---------
------------- - ---------
---------------- --- ---- ----
-----------
---------
-------
-------在这个示例中，我们使用 createLinearGradient() 方法创建了一个线性渐变对象，并设置了起始和结束颜色。然后将这个渐变对象设置为填充样式，并填充矩形。
总结
通过本文的介绍，你应该对 HTML Canvas 中的 fill() 方法有了更深入的了解。除了上面提到的用法外，fill() 方法还可以与其他绘图方法一起使用，实现更加复杂的效果。希望本文能帮助你更好地使用 Canvas 绘制各种图形和效果。