---
name: "CanvasGradient"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "CanvasGradient"
---

## CanvasGradient

> [VERSION] 基础库 >= 2.21.8

> 💡 可通过 CanvasContext.createLinearGradient 或 CanvasContext.createCircularGradient 创建。

### 描述

CanvasGradient 对象，表示渐变颜色

### 参数

无


### 返回值

类型: `CanvasGradient`

CanvasGradient 实例

#### 方法

| 方法名 | 说明 |
| --- | --- |
| `addColorStop` | 添加渐变颜色断点 |

### 示例代码

#### 使用线性渐变

```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();
```