---
name: "CanvasGradient.addColorStop"
mode: "api"
versionRequirements:
  - { name: "Base Library", version: "2.21.8" }
title: "CanvasGradient.addColorStop - 添加渐变颜色断点"
---

## CanvasGradient.addColorStop

> [VERSION] Base Library >= 2.21.8

### Description

Add a gradient color stop

### Parameters

`Params`

| Parameter | Type | Required | Description |
| --- | --- | --- | --- |
| `position` | `number` | Yes | Stop position, range 0-1 |
| `color` | `string` | Yes | Color value |

### Return Value

None


### Examples

#### Add color stop

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