vue3用canvas实现图片画矩形多边形箭头撤销反撤销全屏

要实现这个功能，你需要先在 Vue3 中使用 canvas 标签和 getContext 方法来创建一个画布元素。然后，你可以利用 canvas 的 API 绘制图形、撤销和反撤销操作。

以下是一个简单的示例代码，可以用来实现在 canvas 中绘制矩形：

<template>
  <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="endDrawing"></canvas>
</template>

<script>
export default {
  data() {
    return {
      canvas: null,
      ctx: null,
      isDrawing: false,
      startX: 0,
      startY: 0,
      endX: 0,
      endY: 0
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas
    this.ctx = this.canvas.getContext('2d')
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true
      this.startX = e.clientX - this.canvas.offsetLeft
      this.startY = e.clientY - this.canvas.offsetTop
    },
    draw(e) {
      if (!this.isDrawing) return
      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)
      this.endX = e.clientX - this.canvas.offsetLeft
      this.endY = e.clientY - this.canvas.offsetTop
      this.ctx.fillRect(this.startX, this.startY, this.endX - this.startX, this.endY - this.startY)
    },
    endDrawing() {
      this.isDrawing = false
    }
  }
}
</script>

这个示例中，我们在 canvas 标签上绑定了三个事件：mousedown、mousemove 和 mouseup。当用户按下鼠标左键时，我们会记录起始坐标，然后在 mousemove 事件中实时更新结束坐标，并使用 fillRect 方法画出一个矩形。当用户松开鼠标左键时，我们会将 isDrawing 标记为 false，停止绘制。

你可以根据这个示例，使用 canvas 的 API 来实现多边形、箭头、撤销、反撤销和全屏等功能。