小程序 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个参数 ，圆弧的半径不难理解，前四个参数到底指的是那两个点的坐标，百思不得解

一张图了然：

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

点击(此处)折叠或打开

1. strokeRect: function(color){
   
2.     const ctx = wx.createCanvasContext('shareCanvas1'); //获取上下文的 ctx 
   
3.     var _this=this; //切换 this 的指针
4.     ctx.beginPath()
   
5.     ctx.setStrokeStyle(color) 圆弧的颜色
   
6.     ctx.fill()
   
7.     let p = {x: sx, y: sy} //开始位置的zuobia
8.     let r = 10 //弧线的半径
   
9.     let num = 120//边长
   
10.     let numR = r + num
    
11.     ctx.moveTo(p.x, p.y) //开始位置
    
12.     ctx.arcTo(p.x + num + r, p.y, p.x + numR, p.y + r, r)//第一个圆弧 右上
    
13.     ctx.lineTo(p.x + num + r, p.y + numR)
    
14.     ctx.arcTo(p.x + num + r, p.y + numR + r, p.x + num, p.y + numR + r, r)//第一个圆弧 右下
    
15.     ctx.lineTo(p.x, p.y + numR + r)
    
16.     ctx.arcTo(p.x - r, p.y + numR + r, p.x - r, p.y + numR, r)//第一个圆弧 左下
    
17.     ctx.lineTo(p.x - r, p.y + r)
    
18.     ctx.arcTo(p.x - r, p.y, p.x, p.y, r)//第一个圆弧 左上
    
19.     ctx.stroke();
    
20.   },

效果图：

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