WeChat applet API drawing addColorStop (create color gradient points)


addColorStop

Definition

Create a color gradient point.

Tip: The part smaller than the minimum stop will be rendered according to the color of the minimum stop, and the part larger than the maximum stop will be rendered according to the color of the maximum stop.

Tip: You need to use addColorStop() to specify gradient points, at least two.

Parameters

QQ截图20170208135947.png

Example

const ctx = wx.crateCanvasContext('myCanvas')// Create circular gradientconst grd = ctx.createCircularGradient(75, 50, 50)
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 gradientctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()

201612241154059332.png