请解释Canvas中的渐变（Gradient）是什么，以及如何使用渐变填充或描边！

在Canvas中，渐变（Gradient）是一种用于创建平滑过渡效果的特殊样式。它可以用作填充或描边的颜色，允许你在形状上应用从一个颜色到另一个颜色的平滑过渡。

Canvas提供了两种类型的渐变：线性渐变（Linear Gradient）和径向渐变（Radial Gradient）。

1. 线性渐变（Linear Gradient）：在两个指定点之间创建一个线性的颜色过渡。

• 创建线性渐变对象：

const gradient = ctx.createLinearGradient(x1, y1, x2, y2);

x1、y1 是起始点的坐标，x2、y2 是结束点的坐标。

• 添加颜色停止点（Color Stops）：

gradient.addColorStop(offset, color);

offset 是 0.0（起始点）到 1.0（结束点）之间的值，表示颜色过渡的位置。

• 应用渐变样式：

ctx.fillStyle = gradient;

或

ctx.strokeStyle = gradient;

2. 径向渐变（Radial Gradient）：以一个中心点为基准，在两个圆之间创建一个径向的颜色过渡。

• 创建径向渐变对象：

const gradient = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2);

x1、y1 是起始圆的中心坐标，r1 是起始圆的半径。x2、y2 是结束圆的中心坐标，r2 是结束圆的半径。

• 添加颜色停止点（Color Stops）：

gradient.addColorStop(offset, color);

offset 是 0.0（起始圆）到 1.0（结束圆）之间的值，表示颜色过渡的位置。

• 应用渐变样式：

ctx.fillStyle = gradient;

或

ctx.strokeStyle = gradient;

以下是一个使用线性渐变填充矩形的示例代码：

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
 
// 创建线性渐变对象
const gradient = ctx.createLinearGradient(0, 0, 400, 0);
 
// 添加颜色停止点
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'yellow');
gradient.addColorStop(1, 'blue');
 
// 应用渐变样式
ctx.fillStyle = gradient;
 
// 绘制矩形
ctx.fillRect(50, 50, 300, 150);

在这个示例中，我们创建了一个从红色到黄色再到蓝色的线性渐变，然后将渐变应用为矩形的填充样式，通过fillRect方法绘制矩形区域。

你可以根据需要调整渐变的起始点和结束点、添加多个颜色停止点，以及将渐变应用于填充或描边样式，以实现更多有趣的效果。类似地，你可以使用径向渐变对象来创建径向渐变并应用样式。