WeChat small program API drawing addColorStop (create color gradient point)

Drawing interfaces and methods

canvasContext.addColorStop

Defined

Create a gradient point for the color.

Tip: The portion less than the minimum stop is rendered as the color of the minimum stop, and the portion greater than the maximum stop is rendered as the color of the maximum stop.

Tip: You need addColorStop() to specify a gradient point, at least two.

Parameters

Example

const ctx = wx.crateCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(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()

Drawing interfaces and methods