vue 引入canvas

在 Vue.js 中引入和使用 Canvas 需要注意的是，Vue 本身并不直接支持 Canvas 组件，因为Canvas是一种浏览器原生支持的HTML5 API，但它可以在组件内部实现渲染功能。你可以创建一个自定义组件，利用 JavaScript 控制 Canvas 的渲染。

以下是简单的步骤：

1. **创建组件**：
创建一个名为 `CanvasComponent.vue` 的文件，内容可以包括 HTML 结构、JavaScript 代码以及数据绑定：

   <template>
     <div ref="canvasWrapper">
       <canvas :width="canvasWidth" :height="canvasHeight"></canvas>
     </div>
   </template>

   <script>
   export default {
     props: {
       canvasWidth: { type: Number, required: true },
       canvasHeight: { type: Number, required: true }
     },
     mounted() {
       const canvas = this.$refs.canvasWrapper.querySelector('canvas');
       // ... 这里编写绘制代码
     }
   };
   </script>

2. **实例化并使用**：
在你的主组件或其他组件中，作为子组件导入并传入你需要的宽度和高度属性：

   <template>
     <CanvasComponent :canvasWidth="800" :canvasHeight="600" />
   </template>

   <script>
   import CanvasComponent from './CanvasComponent.vue';

   export default {
     components: {
       CanvasComponent
     }
   };
   </script>

在 `mounted()` 生命周期钩子内，你可以获取到画布元素，并开始进行绘图操作。