vue用鼠标绘制多个矩形

要在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方法绘制矩形框。 你可以根据自己的需求修改这个示例，例如通过计算属性动态生成矩形框的坐标和颜色数组，或通过鼠标事件实时绘制矩形框。