Canvas.arcTo() 的使用，画一条带圆角的线段，画一个思维导图一基础

在这里插入图片描述

一、方法定义

canvas.arcTo 这个方法还是比较难理解的。因为它不是直观的绘制路径，而是间接的。

它的参数是这样的。

canvas.arcTo(ax,ay,bx,by,radius)

它是由两个点和一个圆角半径来确定一条弧线。这么说你肯定是不能明白的，看下面例子。

二、参数解释

结合图解释一下这几个参数的含义。

比如需要画这样一条曲线。

在这里插入图片描述

先告诉你，这条线是由三条线段组成的：
两条 arcTo() 线段，一条 lineTo() 线段

1. 线段1 arcTo()

在不了解 arcTo() 之前，你绝对想不到，第一条 arcTo() 线段是这样的：

在这里插入图片描述

在这里插入图片描述
来解释一下，如上图所标注的信息：

1点，就是路径原来所在的位置，起点
2点，就是 ax, ay
3点，就是 bx, by
这个圆角的大小就是 radius

这样需要说明的是，从 1 点到 2 点并没有 lineTo() 的操作，这段直线+弧角的线段完全是 arcTo() 生成的。

这里我用 abcd 点表示 1234点，1 点坐标就是 ax,ay b点就是 bx,by

canvas.arcTo(ax,ay,bx,by,radius)

2. 线段2 arcTo()

那么接下来的线段就是从第一个 arcTo() 末端开始以 2、3点为参数做 arcTo() 操作，就会生成第二条线段。

canvas.arcTo(bx,by,cx,cy,radius)

在这里插入图片描述

3. 线段3 直线 lineTo()

最后一条直线就是直接

canvas.lineTo(dx,dy)

在这里插入图片描述

三、完整代码就是

你只需要根据参数说明传入参数，即可得到这样一条线段

/**
 *  在 a 与 d 点之间线一条带圆角的拆线
 * @param ctx canvas.context
 * @param pointA 起点坐标 {x,y}
 * @param pointD 末端坐标 {x,y}
 * @param radius  圆角半径 Number
 * @param lineWidth  线段宽度 Number
 */
function drawArcLine(ctx, pointA, pointD, radius, lineWidth){
    
    
    ctx.strokeStyle = 'black'
    ctx.fillStyle = 'black'
    ctx.font = '24px 微软雅黑'
    ctx.moveTo(pointA.x, pointA.y)
    ctx.fillText(`${
      
      pointA.x},${
      
      pointA.y}`,pointA.x, pointA.y + 30)
    // ctx.lineTo(pointA.x + (itemCenter.x - pointA.x) / 2 - radius, pointA.y)

    ctx.fillText(`${
      
      pointA.x + (pointD.x - pointA.x) / 2},${
      
      pointA.y}`,pointA.x + (pointD.x - pointA.x)/2, pointA.y + 30)

    ctx.arcTo(
        pointA.x + (pointD.x - pointA.x) / 2,
        pointA.y,
        pointA.x + (pointD.x - pointA.x) / 2,
        pointD.y,
        radius
    )

    ctx.fillText(`${
      
      pointA.x + (pointD.x - pointA.x) / 2},${
      
      pointD.y}`,pointA.x + (pointD.x - pointA.x) / 2, pointD.y)

    ctx.arcTo(
        pointA.x + (pointD.x - pointA.x) / 2,
        pointD.y,
        pointD.x,
        pointD.y,
        radius
    )

    ctx.lineTo(pointD.x, pointD.y)
    ctx.stroke()
}

四、可以做什么

最终你可以实现这样的效果，像思维导图一样

在这里插入图片描述

2023-07-11

结果一不小心做了个导图

在这里插入图片描述

2023-07-13

结果更进一步

在这里插入图片描述