canvasrenderingcontext2d.arcto(number x1, number y1, number x2, number y2, number radius)
主体： 企业支付宝小程序 、 个人支付宝小程序
将一个由控制点与半径控制的弧线添加到当前子路径。
效果示例
代码示例执行效果。蓝色点为起始点，两个红色点为控制点。
number x1
第一个控制点的 x 轴坐标。
number y1
第一个控制点的 y 轴坐标。
number x2
第二个控制点的 x 轴坐标。
number y2
第二个控制点的 y 轴坐标。
number radius
圆弧的半径。
代码示例
.js
.axml
page({
oncanvasready() {
my.createselectorquery().select('#canvas').node().exec((res) => {
const canvas = res[0].node
const ctx = canvas.getcontext('2d')
// 起始点坐标
const basex = 200
const basey = 20
// 控制点 1 坐标
const controlx1 = 200
const controly1 = 130
// 控制点 2 坐标
const controlx2 = 50
const controly2 = 20
// 圆弧半径
const r = 40
// 绘制弧线
ctx.strokestyle = 'black'
ctx.linewidth = 5
ctx.beginpath()
ctx.moveto(basex, basey)
ctx.arcto(controlx1, controly1, controlx2, controly2, r)
ctx.stroke()
// 绘制切线
ctx.strokestyle = 'gray'
ctx.linewidth = 1
ctx.beginpath()
ctx.moveto(basex, basey)
ctx.lineto(controlx1, controly1)
ctx.lineto(controlx2, controly2)
ctx.stroke()
// 绘制起始点
ctx.fillstyle = 'blue'
ctx.beginpath()
ctx.arc(basex, basey, 5, 0, 2 * math.pi)
ctx.fill()
// 绘制控制点
ctx.fillstyle = 'red'
ctx.beginpath()
ctx.arc(controlx1, controly1, 5, 0, 2 * math.pi)
ctx.arc(controlx2, controly2, 5, 0, 2 * math.pi)
ctx.fill()
})
},
})<canvas id="canvas" type="2d" onready="oncanvasready">canvas>