CanvasContext.addColorStop

Add a circular gradient point.

Parameters

It is an object, the fields can be seen in following table

PropertyTypeDescription
stopNumberReprensent the size between gradient start and end, the range should be 0-1.
colorColorThe 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()