知识库

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,
    body {
      width: 100vw;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <h3 style="width: 70vw;">
    如果 lineJoin 属性设置为 bevel，那么两个线段相交时，会用一条直线来连接两个拐角外部的点，
    使之构成一个三角形。如果设置为 miter，即 lineJoin 属性的默认值，效果与 bevel 相同，
    只是会再画一个三角形，使两个线段的接合处变成一个矩形。如果设置为 round， 那么两个线段的
    拐角处会画上一段填充好的圆弧。
    <br><br>
    当使用 miter 样式来绘制线段连接点时，还可以指定一个 miterLimit 属性（默认值 10.0）。
    如果两个线段的夹角很小，斜接线就可能变得非常长，如果太长，斜接线长度除以二分之一线宽的值
    已经超过了 miterLimit 的话，浏览器就会使用 bevel 样式来处理两个线段的接合处。
  </h3>
  <img src="./imgs/line-join-1.png" alt="">
  <img src="./imgs/line-join-2.png" alt="">
  <img src="./imgs/miter-limit.png" alt="">
  <img src="./imgs/line-api.png" alt="">

  <script>
    const canvas = document.querySelector('#canvas')
    const context = canvas.getContext('2d')

    canvas.style.background = '#ddd'

    let spacing = 80
    context.lineWidth = 10

    const ary = ['round', 'bevel', 'miter']
    ary.forEach((value, index) => {
      context.lineJoin = value
      context.beginPath()
      context.moveTo(20 + spacing * index, 20)
      context.lineTo(50 + spacing * index, 70)
      context.lineTo(70 + spacing * index, 30)
      context.stroke()
    })
  </script>
</body>

</html>