CanvasContext.createCircularGradient

创建一个圆形的渐变色。起点在圆心,终点在圆环。需要使用 addColorStop() 来指定渐变点,至少需要两个。

入参

Object 类型,属性如下:

属性类型描述
xNumber圆心 x 坐标。
yNumber圆心 y 坐标。
rNumber圆半径。

示例代码

//.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()

显示效果如下图所示:

image

阿里云首页 相关技术圈