小程序 Canvas arcTo体会心得

小程序 Canvas arcTo 文档连接地址
https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.arcTo.html

Canvas arcTo 
    CanvasContext.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: 圆弧的半径
            字面的理解：画圆弧需要两个坐标点和圆弧的半径 5个参数 ，圆弧的半径不难理解，前四个参数到底指的是那两个点的坐标，百思不得解

一张图了然：

可以理解为：这条弧线的两条切线的焦点为:第一个控制点,结束点为:第二个控制点
代码如下：

strokeRect: function(color){
    const ctx = wx.createCanvasContext('shareCanvas1'); //获取上下文的 ctx
    var _this=this; //切换 this 的指针
    ctx.beginPath()
    ctx.setStrokeStyle(color) 圆弧的颜色
    ctx.fill()
    let p = {x: sx, y: sy} //开始位置的zuobia
    let r = 10 //弧线的半径
    let num = 120//边长
    let numR = r + num
    ctx.moveTo(p.x, p.y) //开始位置
    ctx.arcTo(p.x + num + r, p.y, p.x + numR, p.y + r, r)//第一个圆弧 右上
    ctx.lineTo(p.x + num + r, p.y + numR)
    ctx.arcTo(p.x + num + r, p.y + numR + r, p.x + num, p.y + numR + r, r)//第一个圆弧 右下
    ctx.lineTo(p.x, p.y + numR + r)
    ctx.arcTo(p.x - r, p.y + numR + r, p.x - r, p.y + numR, r)//第一个圆弧 左下
    ctx.lineTo(p.x - r, p.y + r)
    ctx.arcTo(p.x - r, p.y, p.x, p.y, r)//第一个圆弧 左上
    ctx.stroke();
  },

效果图：

参照的链接地址：https://codeplayer.vip/p/j7scu