vue 获取canvas的长和高

在Vue.js中获取Canvas元素的宽度和高度，你可以通过以下步骤完成：

1. 首先，在模板（template）中创建或引用一个名为`canvasElement`的`canvas`元素，并给它一个`ref`属性，这样在组件实例中就可以通过`this.$refs.canvasElement`访问这个元素：

<template>
  <canvas ref="canvasElement"></canvas>
</template>

2. 在你的Vue组件的`data()`函数中定义一个变量用于存储canvas尺寸，初始化为初始值，比如`{ width: 0, height: 0 }`。

3. 定义一个`mounted()`生命周期钩子，当组件挂载到DOM后，你可以在这里获取canvas的实际大小：

export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
    };
  },
  mounted() {
    this.updateCanvasSize();
  },
  methods: {
    updateCanvasSize() {
      if (this.$refs.canvasElement) {
        const { width, height } = this.$refs.canvasElement.getBoundingClientRect();
        this.canvasWidth = width;
        this.canvasHeight = height;
      }
    },
  },
};

在这个`updateCanvasSize()`方法里，我们首先检查`$refs.canvasElement`是否存在，然后通过`getBoundingClientRect()`方法获取canvas相对于视口的位置信息，包括宽度和高度。

4. 现在，你可以随时在组件内部使用`this.canvasWidth`和`this.canvasHeight`来获取canvas的实际尺寸了。