canvascontext.beziercurveto(number cp1x, number cp1y, number cp2x, number cp2y, number x, number y)
支付宝客户端 支持
支小宝客户端 支持
安诊儿客户端 支持
主体： 企业支付宝小程序 、 个人支付宝小程序
相关文档： 旧版 canvas 迁移指南
创建三次贝塞尔曲线。
需要传入三个点，前两个是控制点，第三个是终点。曲线的起始点为路径中前一个点，可以通过 修改。
效果示例
代码示例执行效果
默认标题0
number cp1x
第一个贝塞尔控制点的 x 轴坐标
number cp1y
第一个贝塞尔控制点的 y 轴坐标
number cp2x
第二个贝塞尔控制点的 x 轴坐标
number cp2y
第二个贝塞尔控制点的 y 轴坐标
number x
结束点的 x 轴坐标
number y
结束点的 y 轴坐标
代码示例
.js
.axml
const ctx = my.createcanvascontext('canvas');
// 定义 起始点, 控制点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();
ctx.draw()
<canvas id="canvas">canvas>
蓝色点: 起始点。红色点: 两个控制点。绿色点: 结束点。
默认标题0