vue怎么使用canvas绘制平面图

在 Vue 中使用 `canvas` 绘制平面图，你可以通过以下步骤进行：

1. 引入 canvas 元素：首先，在 Vue 的模板中创建一个 `canvas` 元素，并给它一个唯一的 ID，方便后续引用。

<template>
  <div>
    <canvas ref="myCanvas"></canvas>
  </div>
</template>

2. 使用 `ref` 获取 canvas 实例：在 Vue 实例中，你可以通过 `this.$refs` 来获取这个 canvas 元素的实际 DOM 对象，然后将其赋值给一个变量，如 `canvasRef`。

export default {
  data() {
    return {
      canvasRef: null,
    };
  },
  mounted() {
    this.canvasRef = this.$refs.myCanvas;
  },
};

3. 绘制函数：定义一个方法，利用 `canvasRef.getContext('2d')` 获取绘图上下文，然后编写绘制图形的代码。这里是一个简单的例子，画一个矩形：

methods: {
  drawRectangle(x, y, width, height) {
    const ctx = this.canvasRef.getContext('2d');
    ctx.fillStyle = 'blue';
    ctx.fillRect(x, y, width, height);
  },
}

4. 调用绘制函数：现在你可以在需要的时候调用 `drawRectangle()` 函数传入相应的坐标和尺寸。

methods: {
  //...
  handleClick() {
    this.drawRectangle(50, 50, 100, 75);
  }
},

5. 添加事件监听：为了响应用户的交互，如点击事件，可以添加 event listener 到 canvas 上。

<template>
  <!-- ... -->
  <button @click="handleClick">Draw Rectangle</button>
</template>

以上就是基础的 Vue + Canvas 绘制平面图的示例。你可以根据实际需求定制更复杂的图形，比如使用路径(`arcTo`, `moveTo`, `lineTo`)、渐变(`createLinearGradient`)等高级功能。