canvas封装vue vue 封装dialog

Canvas是HTML5新增的一个元素，可以通过JavaScript来绘制图形、动画和游戏等。在Vue中封装Canvas可以方便地在组件中使用Canvas，并提供一些常用的方法和属性。

我们可以创建一个Canvas组件，命名为CanvasWrapper。在该组件中，我们可以使用Vue的生命周期钩子函数mounted来获取Canvas元素，并将其保存到一个变量中。

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
  },
}
</script>

在mounted函数中，我们使用this.$refs.canvas来获取到Canvas元素，并使用getContext('2d')方法获取到绘图上下文。这样，我们就可以通过this.context来操作Canvas了。

接下来，我们可以在CanvasWrapper组件中封装一些常用的绘图方法，比如绘制矩形、绘制文本等。以绘制矩形为例，我们可以在methods中定义一个drawRect方法，并传入矩形的位置和大小等参数。

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
    this.drawRect(10, 10, 100, 50);
  },
  methods: {
    drawRect(x, y, width, height) {
      this.context.fillRect(x, y, width, height);
    }
  }
}
</script>

在drawRect方法中，我们使用fillRect方法来绘制矩形。fillRect方法接受四个参数，分别是矩形的左上角x坐标、y坐标，以及矩形的宽度和高度。通过调用this.context.fillRect(x, y, width, height)，我们就可以在Canvas上绘制一个矩形了。

除了绘制基本图形，Canvas还支持绘制路径、绘制图片等。我们可以在CanvasWrapper组件中继续封装这些方法，以供使用。

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>
<script>
export default {
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext('2d');
    this.drawPath();
    this.drawImage();
  },
  methods: {
    drawPath() {
      this.context.beginPath();
      this.context.moveTo(50, 50);
      this.context.lineTo(100, 100);
      this.context.lineTo(150, 50);
      this.context.closePath();
      this.context.stroke();
    },
    drawImage() {
      const image = new Image();
      image.src = 'path/to/image.jpg';
      image.onload = () => {
        this.context.drawImage(image, 0, 0);
      };
    }
  }
}
</script>

在drawPath方法中，我们使用beginPath方法开始绘制路径，并使用moveTo、lineTo等方法来定义路径的各个点，最后使用closePath方法闭合路径，并使用stroke方法绘制路径的轮廓。

在drawImage方法中，我们创建一个Image对象，并设置其src属性为要绘制的图片路径。在图片加载完成后，我们使用drawImage方法将图片绘制到Canvas上。

以上就是封装Canvas的基本过程，通过封装，我们可以在Vue中方便地使用Canvas，并提供一些常用的绘图方法。Canvas还有很多其他的功能和用法，可以根据具体需求进行进一步的研究和封装。