canvasgradient canvasrenderingcontext2d.createradialgradient(number x0, number y0, number r0, number x1, number y1, number r1)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
创建一个放射性的渐变色。
number x0
开始圆形的 x 轴坐标。
number y0
开始圆形的 y 轴坐标。
number r0
开始圆形的半径。
number x1
结束圆形的 x 轴坐标。
number y1
结束圆形的 y 轴坐标。
number r1
结束圆形的半径。
canvasgradient
渐变对象。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 设置开始圆形的参数
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, "rgba(255, 255, 255, 0)")
grd.addcolorstop(1, "green")
// 填充渐变
ctx.fillstyle = grd
ctx.fillrect(20, 20, 250, 180)
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>