vue canvas 绘制多个矩形框

要在Vue中绘制多个矩形框，可以使用HTML5 Canvas API和Vue组件的结合。

首先，创建一个Vue组件，其中包含一个canvas元素和绘制方法。在该组件的data属性中定义矩形的坐标和颜色数组。然后，在mounted钩子函数中获取canvas元素的上下文，使用循环语句绘制多个矩形框。

下面是一个简单的示例代码：

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

<script>
export default {
  data() {
    return {
      rects: [
        { x: 10, y: 10, width: 50, height: 50, color: 'red' },
        { x: 70, y: 10, width: 50, height: 50, color: 'green' },
        { x: 130, y: 10, width: 50, height: 50, color: 'blue' },
      ]
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')

    this.rects.forEach(rect => {
      ctx.fillStyle = rect.color
      ctx.fillRect(rect.x, rect.y, rect.width, rect.height)
    })
  }
}
</script>

在这个示例中，我们定义了一个名为rects的数组，其中包含三个矩形框的位置、大小和颜色。在mounted钩子函数中，我们使用Canvas API绘制这些矩形框。使用fillStyle属性设置矩形框的颜色，使用fillRect方法绘制矩形框。

你可以根据自己的需求修改这个示例，例如通过计算属性动态生成矩形框的坐标和颜色数组，或通过鼠标事件实时绘制矩形框。