问题描述

在 uniapp 的组件中使用 canvas 组件，发现在页面中渲染不出来。

原因分析

在 uniapp 中将 canvas 做成组件并在微信小程序中无法正常显示的主要原因包括以下几点 ‌： 1、没有写 canvas-id‌：在自定义组件中，canvas 标签必须指定 canvas-id 属性，否则无法正确创建和管理 canvas 上下文 ‌。 2‌、uni.createCanvasContext 方法没有传入组件实例 ‌：在单独作为组件引入时，需要传入组件实例。在 Vue 2 中是 this，在 Vue 3 中是 getCurrentInstance()‌。canvas 标签上写了 type="2d"‌：在自定义组件中，不应使用 type="2d"，因为这会导致无法绘制图形 ‌。 3‌、没有在 onReady 或者 onMounted 生命周期里实例化 canvas‌：确保在组件的生命周期钩子 onReady 或 onMounted 中实例化 canvas，以确保画布正确初始化 ‌。