canvas涂鸦vue

canvas是HTML5中的一个元素，用于在网页上绘制图形、动画和其他视觉效果。它提供了一个基于像素的绘图环境，可以通过JavaScript来操作和控制。

在Vue中使用canvas涂鸦可以通过自定义组件来实现。我们需要在Vue中创建一个canvas组件，然后在该组件中使用canvas元素来绘制图形。下面是一个简单的示例代码：

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
  </div>
</template>
<script>
export default {
  name: 'CanvasDoodle',
  data() {
    return {
      isDrawing: false,
      context: null,
      lastX: 0,
      lastY: 0
    };
  },
  mounted() {
    this.context = this.$refs.canvas.getContext('2d');
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.lastX = e.clientX;
      this.lastY = e.clientY;
    },
    draw(e) {
      if (!this.isDrawing) return;
      this.context.beginPath();
      this.context.moveTo(this.lastX, this.lastY);
      this.context.lineTo(e.clientX, e.clientY);
      this.context.stroke();
      this.lastX = e.clientX;
      this.lastY = e.clientY;
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};
</script>

在上面的示例代码中，我们创建了一个名为CanvasDoodle的Vue组件。在组件的模板中，我们使用了canvas元素，并通过ref属性引用了它，以便在JavaScript中操作它。

在组件的mounted钩子函数中，我们获取了canvas的2D绘图上下文，通过this.$refs.canvas可以访问到canvas元素。

接下来，我们定义了几个方法来实现涂鸦的功能。startDrawing方法在鼠标按下时触发，将isDrawing标记为true，并记录下鼠标按下时的坐标。

draw方法在鼠标移动时触发，首先判断isDrawing是否为true，如果是才执行绘制操作。我们使用context.beginPath()来开始一个新的路径，然后使用context.moveTo()将画笔移动到上一个点的坐标，再使用context.lineTo()将画笔移动到当前点的坐标，最后使用context.stroke()来进行绘制。我们更新lastX和lastY的值，以便在下一次绘制时使用。

stopDrawing方法在鼠标松开时触发，将isDrawing标记为false，表示停止绘制。

通过以上的代码，我们就可以实现一个简单的canvas涂鸦功能。当鼠标按下并移动时，就会在canvas上绘制出连续的线条。你还可以进一步扩展该组件，添加更多的功能，如选择画笔颜色、线条粗细等。