canvascontext.arcto(number x1, number y1, number x2, number y2, number radius)
支付宝客户端 支持
支小宝客户端 支持
安诊儿客户端 支持
主体: 企业支付宝小程序 、 个人支付宝小程序
相关文档: 旧版 canvas 迁移指南
根据基础点、控制点和半径,绘制圆弧路径。
number x1
第一个控制点的 x 轴坐标
number y1
第一个控制点的 y 轴坐标
number x2
第二个控制点的 x 轴坐标
number y2
第二个控制点的 y 轴坐标
number radius
圆弧的半径
.js
// 这是一段绘制圆弧的简单的代码片段。基础点是蓝色的,两个控制点是红色的。
const context = my.createcanvascontext('canvas');
// 基础点坐标
const basex = 200
const basey = 20
// 控制点 1 坐标
const controlx1 = 200
const controly1 = 130
// 控制点 2 坐标
const controlx2 = 50
const controly2 = 20
// 圆弧半径
const r = 40;
// 绘制弧线
context.strokestyle = 'black';
context.linewidth = 5;
context.beginpath();
context.moveto(basex, basey);
context.arcto(controlx1, controly1, controlx2, controly2, r);
context.stroke();
// 绘制切线
context.strokestyle = 'gray';
context.linewidth = 1;
context.beginpath();
context.moveto(basex, basey);
context.lineto(controlx1, controly1);
context.lineto(controlx2, controly2);
context.stroke();
// 绘制基础点
context.fillstyle = 'blue';
context.beginpath();
context.arc(basex, basey, 5, 0, 2 * math.pi);
context.fill();
// 绘制控制点
context.fillstyle = 'red';
context.beginpath();
context.arc(controlx1, controly1, 5, 0, 2 * math.pi);
context.arc(controlx2, controly2, 5, 0, 2 * math.pi);
context.fill();
context.draw()