初学vue3与ts：获取uniapp canvas实例

<template>
	<view>
		<canvas canvas-id='canvas-test' class="canvas-test"></canvas>
	</view>
</template>

<script setup lang="ts">
	//封装的js
	import libs from '@/libs';
	//重点引入的
	import type { ComponentInternalInstance } from "vue";
	import { getCurrentInstance } from 'vue';
	const {proxy} = getCurrentInstance() as ComponentInternalInstance;


	const imgHttp = 'xxx/imgs/'
	onLoad(()=>{
		drawPoster();
	});
	const drawPoster = ()=>{
		const ctx = uni.createCanvasContext('canvas-test', proxy);
		return new Promise(async(r,j)=>{
			//绘制背景图
			await drwaBg(ctx);
			ctx.draw();
		})
	};
	const drwaBg = (ctx:any) : Promise<string>=>{
		return new Promise(async(r)=>{
			ctx.beginPath();
			let cWidth = uni.upx2px(750) //宽
			let cHeight = uni.upx2px(1362) //高
			const bgImgUrl = await libs.downloadFile(`${imgHttp}sell-save-bg.png`);
			ctx.drawImage(bgImgUrl,0,0,cWidth,cHeight);
			ctx.closePath();
			r(ctx);
		});
	};
</script>

<style lang="less" scoped>
	.canvas-test{
		width: 750rpx;
		height: 1362rpx;
	}
</style>

另外一种

import type { ComponentPublicInstance } from 'vue';
const ins = getCurrentInstance();
const canvasId = 'openOrder';
const ctx = uni.createCanvasContext(canvasId, ins?.proxy);