uniapp 小程序 Canvas 绘制组件化 h5可以绘制 但是小程序无法绘制 调用无效的解决方法 (亲测可用）

uniapp 小程序 Canvas 绘制组件化 h5可以绘制 但是小程序无法绘制 调用无效的解决方法 (亲测可用）

引言

最近在做一个uniapp小程序项目时，遇到一个奇怪的问题：在页面中直接使用 canvas 绘制的时候一切正常，可是当将绘制功能封装成组件后，canvas 就无法绘制了。这个问题很困扰我，搜索了很多资料也没有找到直接的解决办法，直到我通过对比 Vue3 和 Vue2 的使用方法才找到了答案。接下来，我将分享一下这个问题的原因和解决方法。

问题分析

首先，问题出在了 canvas 上下文对象的获取方式。在uniapp中，uni.createCanvasContext 用于获取 canvas 上下文对象，通常来说，它能正常工作。然而，当你将 canvas 绘制功能抽象成一个组件时，由于组件内的上下文环境不同，createCanvasContext 不能正