【理论】canvas之绘制圆角矩形的方式这有个微小的圆角变化,这种方式的缺点就是圆角的大小是不可控制的 arcTo(x1

方式一：利用lineJoin

ctx.lineJoin = 'miter'

1627697507(1).png

ctx.lineJoin = 'round'

1627697398(1).png

这有个微小的圆角变化,这种方式的缺点就是圆角的大小是不可控制的

方式二：利用arcTo

arcTo(x1,y1,x2,y2,raduis)参数分别代表两个点的坐标已经圆形半径，该方法以指定的半径来绘制一条圆弧，该圆弧与当前点到一个点(x1,y1)的联想相切，而且与第一个点到第二个点(x2,y2)的连线也相切 1627696562(1).png

实现样例

1627698349(1).png

具体代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    canvas{
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas" width="800" height="600"></canvas>
  <script>
    let canvas = document.getElementById('myCanvas')
    let ctx = canvas.getContext('2d')


    // 这样就创建了一个有圆角的矩形（50，50，100，100，10）的正方形
    ctx.beginPath()
    ctx.moveTo(60,50)
    ctx.arcTo(150,50,150,150,10)
    ctx.arcTo(150,150,50,150,10)
    ctx.arcTo(50,150,50,50,10)
    ctx.arcTo(50,50,150,50,10)
    ctx.stroke()
   
    //  绘制有一个100 * 100
    // ctx.strokeRect(50,50,100,100)
  </script> 
</body>
</html>