WeChat Open Platform

Mini Programs Documentation

canvasContext.createCircularGradient

Definition

Creates a circular gradient color.

Tip: The start point is in the center of the circle, the end point is the ring of the circle.

Tip: addColorStop() needs to be used to specify gradient stops, there must be at least two.

Parameters

Parameter Type Definition
x Number The x-coordinate of the center of the circle
y Number The y-coordinate of the center of the circle
r Number The radius of the circle

Examples

const ctx = wx.createCanvasContext('myCanvas')

// Create circular gradient
const grd = ctx.createCircularGradient(75, 50, 50)
grd.addColorStop(0, 'red')
grd.addColorStop(1, 'white')

// Fill with gradient
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()