---
name: "CanvasContext.createLinearGradient"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "CanvasContext.createLinearGradient - 创建线性渐变"
---

## CanvasContext.createLinearGradient

> [VERSION] 基础库 >= 2.21.8

### 描述

创建线性渐变

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `x0` | `number` | 是 | 起始点 x 坐标 |
| `y0` | `number` | 是 | 起始点 y 坐标 |
| `x1` | `number` | 是 | 结束点 x 坐标 |
| `y1` | `number` | 是 | 结束点 y 坐标 |

### 返回值

类型: `CanvasGradient`

CanvasGradient 对象

### 示例代码

#### 创建线性渐变

```ts
const ctx = ty.createCanvasContext('myCanvas');
const gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#00ff00');
ctx.setFillStyle(gradient);
ctx.fillRect(0, 0, 200, 100);
ctx.draw();
```