CanvasGradient
The gradient object.
Methods
addColorStop
Adds color gradient points. Areas less than the minimum stop are rendered with the color of the minimum stop. Areas greater than the maximum stop are rendered with the color of the maximum stop.
(stop: number, color: string) => void
| Property | Type | Description |
|---|---|---|
| stop | number | Represents a position between the start and end of the gradient. Value range: 0-1. |
| color | string | The color of the gradient point. |
Sample Code
const ctx = Taro.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()
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| CanvasGradient.addColorStop | ✔️ |
API Support
| API | WeChat Mini-Program | H5 | React Native |
|---|---|---|---|
| CanvasGradient.addColorStop | ✔️ |