CanvasContext.createCircularGradient
Create a circular gradient point, the start point is the center of the circle and the end point is the ring. The addColorStop()
should be called to specify the gradient point and at least two points should be specified.
Parameters
It is Object type.
Property | Type | Description |
x | Number | The x coordinate of original point. |
y | Number | The y coordinate of original point. |
r | Number | The radius. |
Sample Code
copy
//.js
const ctx = my.createCanvasContext('awesomeCanvas')
const grd = ctx.createCircularGradient(90, 60, 60)
grd.addColorStop(0, 'blue')
grd.addColorStop(1, 'red')
ctx.setFillStyle(grd)
ctx.fillRect(20, 20, 250, 180)
ctx.draw()