canvascontext.quadraticcurveto(number cpx, number cpy, number x, number y)

支付宝客户端 支持

支小宝客户端 支持

安诊儿客户端 支持

主体： 企业支付宝小程序 、 个人支付宝小程序

相关文档： 旧版 canvas 迁移指南

number cpx

控制点的 x 轴坐标

number cpy

控制点的 y 轴坐标

number x

终点的 x 轴坐标

number y

终点的 y 轴坐标

const ctx = my.createcanvascontext('canvas');
// 定义 起始点, 控制点, 结束点
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();
ctx.draw();

<canvas id="canvas"></canvas>