uniapp canvas vue3 ts实例

<template><view><canvas canvas-id='canvas-test' class="canvas-test"></canvas></view>
</template><script setup lang="ts">//封装的jsimport 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>