---
name: "CanvasContext.createCircularGradient"
mode: "api"
versionRequirements:
  - { name: "基础库", version: "2.21.8" }
title: "CanvasContext.createCircularGradient - 创建圆形渐变"
---

## CanvasContext.createCircularGradient

> [VERSION] 基础库 >= 2.21.8

### 描述

创建圆形渐变

### 参数

`Params`

| 参数 | 类型 | 必填 | 描述 |
| --- | --- | --- | --- |
| `x` | `number` | 是 | 圆心 x 坐标 |
| `y` | `number` | 是 | 圆心 y 坐标 |
| `r` | `number` | 是 | 圆的半径 |

### 返回值

类型: `CanvasGradient`

CanvasGradient 对象

### 示例代码

#### 创建圆形渐变

```ts
const ctx = ty.createCanvasContext('myCanvas');
const gradient = ctx.createCircularGradient(100, 100, 50);
gradient.addColorStop(0, '#ff0000');
gradient.addColorStop(1, '#0000ff');
ctx.setFillStyle(gradient);
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
ctx.fill();
ctx.draw();
```