JS实现同一页面多个渐变效果的方法

在前端开发中，经常需要为页面添加渐变效果来提升用户体验。如果同一个页面需要多个不同的渐变效果，该如何实现呢？本文将介绍使用JavaScript实现同一页面多个渐变效果的方法，包括线性渐变和径向渐变。

线性渐变

线性渐变是指色彩按照直线方向逐渐变化的效果。可以通过以下步骤实现多个不同的线性渐变效果：

创建Canvas元素。
```
------- -----------------------
```

获取Canvas上下文。

--- ------ - ------------------------------------
--- --- - ------------------------

绘制渐变。

--- -------- - ---------------------------- --- --- ----
------------------------ ----------
------------------------ ----------
------------- - ---------
--------------- -- ------ --------

其中，createLinearGradient() 方法用于创建线性渐变，参数 x0、y0、x1 和 y1 分别表示渐变的起始点和结束点的坐标，addColorStop() 用于设置渐变的颜色和位置，fillRect() 用于填充矩形区域。

示例代码：

--- ------ - ------------------------------------
--- --- - ------------------------

-- ------
--- --------- - --------------------------- -- ------------- ---
------------------------- -----------
------------------------- -----------
------------- - ----------
--------------- -- ------------- ------------- - ---

-- ------
--- --------- - --------------------------- -- -- ---------------
------------------------- -----------
------------------------- -----------
------------- - ----------
--------------- ------------- - -- ------------- ------------- - ---

以上代码实现了一个包含水平和垂直两个不同线性渐变效果的Canvas。

径向渐变

径向渐变是指色彩从中心向外逐渐变化的效果。可以通过以下步骤实现多个不同的径向渐变效果：

创建Canvas元素。
```
------- -----------------------
```