canvasgradient.addcolorstop(number stop, string color)
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南 、 canvascontext.createcirculargradient（圆形渐变色） 、 canvascontext.createlineargradient（线性渐变色） 、 canvascontext.createradialgradient（放射性渐变色）
效果示例
代码示例执行效果
圆形渐变色
线性渐变色
放射性渐变色
number stop
表示渐变色中开始与结束之间的比例位置，范围 0-1。
string color
渐变点的颜色，支持关键字颜色、十六进制、rgb、rgba、hsl、hsla 。
圆形渐变
线性渐变
放射性渐变
.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="canvas1id">canvas>.js
.axml
const ctx = my.createcanvascontext('canvas2id')
// 创建渐变色
const grd = ctx.createlineargradient(10, 10, 150, 10)
grd.addcolorstop(0, 'yellow')
grd.addcolorstop(1, 'blue')
// 设置填充渐变色
ctx.setfillstyle(grd)
ctx.fillrect(20, 20, 250, 180)
ctx.draw()<canvas id="canvas2id">canvas>.js
.axml
const ctx = my.createcanvascontext('canvas')
// 设置开始圆形的参数
let startx = 120
let starty = 110
let startr = 90
// 设置结束圆形的参数
let endx = 40
let endy = 110
let endr = 0
// 创建渐变
const grd = ctx.createradialgradient(startx, starty, startr, endx, endy, endr);
// 设置渐变颜色
grd.addcolorstop(0, "white");
grd.addcolorstop(1, "green");
// 填充渐变
ctx.setfillstyle(grd);
ctx.fillrect(20, 20, 250, 180);
ctx.draw()<canvas id="canvas2id">canvas>- tip
渐变色中小于最小 stop 的部分会按最小 stop 对应的 color 来渲染，大于最大 stop 的部分会按最大 stop 的 对应的 color 来渲染。