CanvasContext.addColorStop
Add a circular gradient point.
Parameters
It is an object, the fields can be seen in following table
Property | Type | Description |
stop | Number | Reprensent the size between gradient start and end, the range should be 0-1. |
color | Color | The Color of the gradient point. |
Sample Code
copy
//.js
const ctx = my.createCanvasContext('myCanvas')
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 color
ctx.setFillStyle(grd)
ctx.fillRect(10, 10, 150, 80)
ctx.draw()