Skip to main content
Version: Next

CanvasGradient

The gradient object.

Reference

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.

Reference

(stop: number, color: string) => void
PropertyTypeDescription
stopnumberRepresents a position between the start and end of the gradient. Value range: 0-1.
colorstringThe 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

APIWeChat Mini-ProgramH5React Native
CanvasGradient.addColorStop✔️

API Support

APIWeChat Mini-ProgramH5React Native
CanvasGradient.addColorStop✔️