# CanvasGradient.addColorStop(number stop, string color)

CanvasContext 是旧版的接口，新版 [Canvas 2D](/miniprogram/dev/component/canvas.md) 接口与 Web 一致

从基础库 [2.9.0](1003706) 开始，本接口停止维护，请使用 [RenderingContext](/miniprogram/dev/api/canvas/RenderingContext) 代替

> __小程序插件__：不支持

> 相关文档: [旧版画布迁移指南](/miniprogram/dev/framework/ability/canvas-legacy-migration.md)、[canvas 组件介绍](/miniprogram/dev/component/canvas.md)

## 功能描述

添加颜色的渐变点。小于最小 stop 的部分会按最小 stop 的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 color 来渲染

## 参数

### number stop

表示渐变中开始与结束之间的位置，范围 0-1。

### string color

渐变点的颜色。

## 示例代码

```js
const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createLinearGradient(30, 10, 120, 10)
grd.addColorStop(0, 'red')
grd.addColorStop(0.16, 'orange')
grd.addColorStop(0.33, 'yellow')
grd.addColorStop(0.5, 'green')
grd.addColorStop(0.66, 'cyan')
grd.addColorStop(0.83, 'blue')
grd.addColorStop(1, 'purple')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()
```
![](@program/dev/image/canvas/color-stop.png)