vue如何实现在页面上画画_Vue使用Canvas绘制图片、矩形、线条、文字，下载图片...

Vue 中可以使用 HTML5 的 Canvas API 来实现在页面上画画，可以通过在 Vue 组件中添加 canvas 元素，并在 mounted 钩子函数中获取其 2D 上下文来实现。

以下是一个实现在页面上画画的示例代码：

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

<script>
export default {
  name: 'DrawCanvas',
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      ctx: null,
    }
  },
  mounted() {
    this.ctx = this.$refs.canvas.getContext('2d');
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.ctx.beginPath();
      this.ctx.moveTo(this.lastX, this.lastY);
      this.ctx.lineTo(e.offsetX, e.offsetY);
      this.ctx.stroke();
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
}
</script>

<style scoped>
canvas {
  width: 100%;
  height: 100%;
  border: 1px solid #000;
}
</style>

上面的代码中，我们在组件中添加了一个 canvas 元素，并为其添加了三个事件监听器，分别是 @mousedown、@mousemove 和 @mouseup，用于开始、绘制和停止绘制画画。

在 mounted 钩子函数中，我们获取了 canvas 元素的 2D 上下文，并将其保存在组件的 this.ctx 属性中。

在组件的 methods 中，我们定义了三个方法，分别是 startDrawing、draw 和 stopDrawing。

startDrawing 方法用于在鼠标按下时记录当前鼠标的位置，并将 isDrawing 属性设置为 true。

draw 方法用于在鼠标移动时绘制线条，如果 isDrawing 为 true，则使用 moveTo 和 lineTo 方法绘制一条线段，并将 lastX 和 lastY 属性更新为当前鼠标的位置。

stopDrawing 方法用于在鼠标松开时将 isDrawing 属性设置为 false，停止绘制画画。

最后，我们在组件的 template 中使用 ref 属性来获取 canvas 元素，并为其添加样式。