canvascontext.createradialgradient(number x0, number y0, number r0, number x1, number y1, number r1)
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
创建一个放射性的渐变色。
需要使用 来指定渐变点,至少需要两个渐变点。
number x0
开始圆形的 x 轴坐标
number y0
开始圆形的 y 轴坐标
number r0
开始圆形的半径
number x1
结束圆形的 x 轴坐标
number y1
结束圆形的 y 轴坐标
number r1
结束圆形的半径
.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()
代码示例执行效果
默认标题0
<canvas id="canvas"></canvas>