使用canvas标签完成折线、矩形、颜色渐变矩形及圆形的绘制

好的，我来回答你的问题。

首先，我们需要在 HTML 中添加一个 canvas 标签：

<canvas id="myCanvas" width="400" height="400"></canvas>

接下来，我们可以使用 JavaScript 来绘制折线、矩形、颜色渐变矩形及圆形，具体代码如下：

// 获取 canvas 元素
const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

// 绘制折线
context.beginPath();
context.moveTo(50, 50);
context.lineTo(100, 100);
context.lineTo(150, 50);
context.strokeStyle = "red";
context.stroke();

// 绘制矩形
context.fillStyle = "blue";
context.fillRect(200, 50, 50, 50);

// 绘制颜色渐变矩形
const gradient = context.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "green");
gradient.addColorStop(1, "blue");
context.fillStyle = gradient;
context.fillRect(50, 150, 200, 50);

// 绘制圆形
context.beginPath();
context.arc(300, 200, 50, 0, 2 * Math.PI);
context.fillStyle = "yellow";
context.fill();

以上代码中，我们使用了 `beginPath()` 方法来开始绘制路径，使用 `moveTo()` 和 `lineTo()` 方法来绘制折线，使用 `strokeStyle` 属性设置线条颜色，使用 `stroke()` 方法来绘制线条。

我们还使用了 `fillStyle` 属性来设置填充颜色，使用 `fillRect()` 方法来绘制矩形，使用 `createLinearGradient()` 方法来创建颜色渐变，使用 `addColorStop()` 方法来设置渐变颜色点，并最终使用 `fill()` 方法来填充颜色渐变矩形。

最后，我们使用 `arc()` 方法来绘制圆形，使用 `fill()` 方法来填充圆形。