反应从上到下添加渐变 - JavaScript

在网页中，渐变效果是一个很常见的设计，它可以增加网页的美观度，同时也可以让用户更好地理解信息。在本文中，我们会介绍一种用 JavaScript 来实现从上到下添加渐变的方法。

实现步骤

1. 首先，我们需要定义一个绘制渐变的 function，它接收四个参数。其中，前两个参数，表示渐变的起始点坐标(x1, y1)，后两个参数表示渐变的终止点坐标(x2, y2)。

function drawGradient(context, x1, y1, x2, y2) {}

2. 接下来，在 function 中，我们需要使用 createLinearGradient() 方法来创建一个线性渐变对象，从上到下渐变。由于横向坐标不变，因此可以设置横向渐变的两个点坐标为相同的。

var gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");

3. 定义好渐变对象后，我们需要使用 fillStyle 属性来将渐变填充到 canvas 中。

context.fillStyle = gradient;
context.fillRect(x1, y1, x2-x1, y2-y1);

4. 最后，我们需要调用该 function 并传入对应的参数，来实现从上到下的渐变效果。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawGradient(context, 0, 0, 300, 400);

完整代码示例

function drawGradient(context, x1, y1, x2, y2) {
  var gradient = context.createLinearGradient(x1, y1, x2, y2);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(0.5, "yellow");
  gradient.addColorStop(1, "green");
  
  context.fillStyle = gradient;
  context.fillRect(x1, y1, x2-x1, y2-y1);
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawGradient(context, 0, 0, 300, 400);

返回的 Markdown 代码片段如下：

# 反应从上到下添加渐变 - JavaScript

在网页中，渐变效果是一个很常见的设计，它可以增加网页的美观度，同时也可以让用户更好地理解信息。在本文中，我们会介绍一种用 JavaScript 来实现从上到下添加渐变的方法。

## 实现步骤

1. 首先，我们需要定义一个绘制渐变的 function，它接收四个参数。其中，前两个参数，表示渐变的起始点坐标(x1, y1)，后两个参数表示渐变的终止点坐标(x2, y2)。

```javascript
function drawGradient(context, x1, y1, x2, y2) {}

2. 接下来，在 function 中，我们需要使用 createLinearGradient() 方法来创建一个线性渐变对象，从上到下渐变。由于横向坐标不变，因此可以设置横向渐变的两个点坐标为相同的。

var gradient = context.createLinearGradient(x1, y1, x2, y2);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");

3. 定义好渐变对象后，我们需要使用 fillStyle 属性来将渐变填充到 canvas 中。

context.fillStyle = gradient;
context.fillRect(x1, y1, x2-x1, y2-y1);

4. 最后，我们需要调用该 function 并传入对应的参数，来实现从上到下的渐变效果。

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawGradient(context, 0, 0, 300, 400);

完整代码示例

function drawGradient(context, x1, y1, x2, y2) {
  var gradient = context.createLinearGradient(x1, y1, x2, y2);
  gradient.addColorStop(0, "red");
  gradient.addColorStop(0.5, "yellow");
  gradient.addColorStop(1, "green");
  
  context.fillStyle = gradient;
  context.fillRect(x1, y1, x2-x1, y2-y1);
}

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
drawGradient(context, 0, 0, 300, 400);