canvascontext.createcirculargradient(number x, number y, number r)
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南 、
创建圆形的渐变色。渐变的起点在圆心,终点在圆环。
需要使用 来指定渐变点,至少需要两个渐变点。
效果示例
代码示例执行效果
默认标题0
number x
圆心 x 坐标
number y
圆心 y 坐标
number r
圆半径
canvasgradient
。
.js
.axml
const ctx = my.createcanvascontext('canvas')
// 创建一个圆形渐变色
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()
<canvas id="canvas"></canvas>