请使用canvas画一个渐变的长方形

<!DOCTYPE html>
<html>
<head>
<title>渐变长方形</title>
</head>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

// 创建渐变
var grd = ctx.createLinearGradient(0, 0, 300, 0); // 从左到右的渐变
grd.addColorStop(0, "red");
grd.addColorStop(1, "blue");

// 绘制矩形并填充渐变
ctx.fillStyle = grd;
ctx.fillRect(0, 0, 300, 150);


// 其他渐变方向示例：

// 从上到下的渐变
// var grd = ctx.createLinearGradient(0, 0, 0, 150);

// 对角线渐变
// var grd = ctx.createLinearGradient(0, 0, 300, 150);

// 径向渐变示例:
// var grd = ctx.createRadialGradient(150, 75, 5, 90, 60, 100);
// grd.addColorStop(0, "red");
// grd.addColorStop(1, "white");
// ctx.fillStyle = grd;
// ctx.fillRect(0, 0, 300, 150);


</script>

</body>
</html>

这段代码创建了一个 300x150 像素的 canvas 元素，并在其中绘制了一个从左到右渐变的红色到蓝色的长方形。

代码解释:

<canvas id="myCanvas" ...>: 创建 canvas 元素，设置宽度和高度，并添加边框。
var ctx = c.getContext("2d");: 获取 2D 绘图上下文。
createLinearGradient(x0, y0, x1, y1): 创建线性渐变对象。x0, y0 是渐变的起始坐标，x1, y1 是渐变的结束坐标。这决定了渐变的方向。
addColorStop(offset, color): 定义渐变的颜色。offset 是渐变位置的偏移量（0.0 到 1.0 之间），color 是该位置的颜色。
fillStyle = grd: 将填充样式设置为渐变对象。
fillRect(x, y, width, height): 绘制填充的矩形。