使用vue + canvas画出四条依次相连的直线 在相连的夹角使用圆弧在内部连接并展示当前角度

好的，让我们来实现这个需求。首先，我们需要在Vue组件中使用canvas，并绘制四条依次相连的直线。代码如下：

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(100, 100)
    ctx.lineTo(150, 100)
    ctx.stroke()
  }
}
</script>

在这段代码中，我们使用`this.$refs.canvas`获取到canvas元素，并使用`getContext('2d')`获取到CanvasRenderingContext2D对象。接着，我们使用`moveTo()`和`lineTo()`方法绘制四条依次相连的直线，并使用`stroke()`方法使其显示在canvas上。

接下来，我们需要在相连的夹角使用圆弧在内部连接，并展示当前角度。代码如下：

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(100, 100)
    ctx.lineTo(150, 100)
    ctx.stroke()

    const x1 = 100
    const y1 = 50
    const x2 = 100
    const y2 = 100
    const x3 = 150
    const y3 = 100

    const angle = getAngle(x1, y1, x2, y2, x3, y3)
    const radius = 20
    const startAngle = Math.PI
    const endAngle = Math.PI + angle * Math.PI / 180
    const centerX = x2
    const centerY = y2
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, startAngle, endAngle)
    ctx.stroke()

    ctx.font = '20px Arial'
    ctx.fillStyle = 'black'
    ctx.fillText(`${angle}°`, centerX - 10, centerY - radius - 5)
  }
}

function getAngle(x1, y1, x2, y2, x3, y3) {
  const dx1 = x1 - x2
  const dy1 = y1 - y2
  const dx2 = x3 - x2
  const dy2 = y3 - y2
  const angle1 = Math.atan2(dy1, dx1)
  const angle2 = Math.atan2(dy2, dx2)
  let angle = angle2 - angle1
  if (angle < 0) {
    angle += 2 * Math.PI
  }
  return angle * 180 / Math.PI
}
</script>

在这段代码中，我们使用`getAngle()`函数计算夹角的角度，并使用`arc()`方法绘制圆弧。需要注意的是，在计算夹角的角度时，我们使用了`Math.atan2()`方法，该方法返回从x轴正方向到指定点(x, y)之间的角度。接着，我们使用`fillText()`方法在圆弧上方展示当前角度。

完整代码如下：

<template>
  <canvas ref="canvas" width="400" height="400"></canvas>
</template>

<script>
export default {
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    ctx.beginPath()
    ctx.moveTo(50, 50)
    ctx.lineTo(100, 50)
    ctx.lineTo(100, 100)
    ctx.lineTo(150, 100)
    ctx.stroke()

    const x1 = 100
    const y1 = 50
    const x2 = 100
    const y2 = 100
    const x3 = 150
    const y3 = 100

    const angle = getAngle(x1, y1, x2, y2, x3, y3)
    const radius = 20
    const startAngle = Math.PI
    const endAngle = Math.PI + angle * Math.PI / 180
    const centerX = x2
    const centerY = y2
    ctx.beginPath()
    ctx.arc(centerX, centerY, radius, startAngle, endAngle)
    ctx.stroke()

    ctx.font = '20px Arial'
    ctx.fillStyle = 'black'
    ctx.fillText(`${angle}°`, centerX - 10, centerY - radius - 5)
  }
}

function getAngle(x1, y1, x2, y2, x3, y3) {
  const dx1 = x1 - x2
  const dy1 = y1 - y2
  const dx2 = x3 - x2
  const dy2 = y3 - y2
  const angle1 = Math.atan2(dy1, dx1)
  const angle2 = Math.atan2(dy2, dx2)
  let angle = angle2 - angle1
  if (angle < 0) {
    angle += 2 * Math.PI
  }
  return angle * 180 / Math.PI
}
</script>