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 | ✔️ |