canvasrenderingcontext2d.quadraticcurveto(number cpx, number cpy, number x, number y)
基础库 或更高版本； 若版本较低，建议采取 兼容处理。
主体： 企业支付宝小程序 、 个人支付宝小程序
将一个二次贝塞尔曲线添加到当前子路径。
需要传入两个点，第一个点是控制点，第二个点是结束点。曲线的起始点为当前子路径的最后一个点，可以调用 moveto 修改。
效果示例
代码示例执行效果。
number cpx
控制点的 x 坐标。
number cpy
控制点的 y 坐标。
number x
结束点的 x 坐标。
number y
结束点的 y 坐标。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 定义 起始点, 控制点, 结束点
let start = { x: 50, y: 20 }
let cp = { x: 230, y: 60 }
let end = { x: 50, y: 100 }
// 绘制二次贝塞尔曲线
ctx.beginpath()
ctx.moveto(start.x, start.y)
ctx.quadraticcurveto(cp.x, cp.y, end.x, end.y)
ctx.stroke()
// 绘制圆球代表起始点和结束点
ctx.beginpath()
ctx.fillstyle = 'blue'
ctx.arc(start.x, start.y, 5, 0, 2 * math.pi)
ctx.fill()
ctx.beginpath()
ctx.fillstyle = 'green'
ctx.arc(end.x, end.y, 5, 0, 2 * math.pi)
ctx.fill()
// 绘制圆球代表控制点
ctx.fillstyle = 'red'
ctx.beginpath()
ctx.arc(cp.x, cp.y, 5, 0, 2 * math.pi)
ctx.fill()
})
}
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>