1.假設寬100%，高1200rpx，通過query.select('#myCanvas').boundingClientRect接口獲取元素寬高，動態(tài)賦值

<template>
   <canvas canvas-id="myCanvas" id="myCanvas" style="width: 100%; height: 1200rpx"></canvas>
</template>
<script setup lang="ts">
const init = ()=>{
 const ctx = uni.createCanvasContext('myCanvas')
 const query = uni.createSelectorQuery()
  query
    .select('#myCanvas')
    .boundingClientRect((data: any) => {
      console.log(data)
      // 繪制底圖
      uni.getImageInfo({
        src: mock.value?.backgroundImageUrl, //底部圖片
        success: (res) => {
          ctx.drawImage(res.path, 0, 0, data?.width, data?.height) // 假設canvas大小為375x667

          ctx.setFontSize(18)
          ctx.setFillStyle('white')
          ctx.fillText(mock.value?.name, 20, data?.height - 80) // 調(diào)整文字位置
          // 繪制左下角文字
          ctx.setFontSize(14)
          ctx.setFillStyle('white')
          ctx.fillText(mock.value?.text, 20, data?.height - 60) // 調(diào)整文字位置
          // 繪制左下角文字
          ctx.setFontSize(12)
          ctx.setFillStyle('white')
          ctx.fillText(mock.value?.tip, 40, data?.height - 35) // 調(diào)整文字位置

          // 繪制右下角二維碼
          uni.getImageInfo({
            src: mock.value?.qrCodeImageUrl,
            success: (qrRes) => {
              ctx.drawImage(qrRes.path, data?.width - 104, data?.height - 104, 84, 84) // 調(diào)整二維碼位置、大小和圓角
              ctx.draw(false, () => {
                // 繪制完成后的回調(diào)，可以在這里做其他事情，比如更新頁面狀態(tài)
              })
            },
            fail: (err) => {
              console.error('加載二維碼圖片失敗:', err)
            },
          })
        },
        fail: (err) => {
          console.error('加載底圖失敗:', err)
        },
      })
    })
    .exec()
}
onReady(()=>{
   init()
})
</script>