canvasrenderingcontext2d.beziercurveto(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
基础库 或更高版本； 若版本较低，建议采取 兼容处理 。
支小宝客户端 支持
安诊儿客户端 支持
主体： 企业支付宝小程序 、 个人支付宝小程序
将一个三次贝塞尔曲线添加到当前子路径。
需要传入三个点，前两个是控制点，第三个是结束点。曲线的起点默认为当前子路径中的最后一个位置，可以调用 moveto 修改。
效果示例
代码示例执行效果。蓝色点: 起始点。红色点: 两个控制点。绿色点: 结束点。
number cp1x
第一个贝塞尔控制点 x 坐标
number cp1y
第一个贝塞尔控制点 y 坐标
number cp2x
第二个贝塞尔控制点 x 坐标
number cp2y
第二个贝塞尔控制点 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')
// 定义 起始点, 控制点1, 控制点2, 结束点
let start = { x: 30, y: 30 }
let cp1 = { x: 80, y: 160 }
let cp2 = { x: 180, y: 10 }
let end = { x: 220, y: 140 }
// 绘制三次贝塞尔曲线
ctx.beginpath()
ctx.moveto(start.x, start.y)
ctx.beziercurveto(cp1.x, cp1.y, cp2.x, cp2.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(cp1.x, cp1.y, 5, 0, 2 * math.pi)
ctx.arc(cp2.x, cp2.y, 5, 0, 2 * math.pi)
ctx.fill()
})
},
})
<canvas id="canvas" type="2d" onready="oncanvasready">canvas>