1.假设宽100%，高1200rpx，通过query.select('#myCanvas').boundingClientRect接口获取元素宽高，动态赋值

<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) // 调整文字位置
          // 绘制左下角文字
          ctx.setFontSize(14)
          ctx.setFillStyle('white')
          ctx.fillText(mock.value?.text, 20, data?.height - 60) // 调整文字位置
          // 绘制左下角文字
          ctx.setFontSize(12)
          ctx.setFillStyle('white')
          ctx.fillText(mock.value?.tip, 40, data?.height - 35) // 调整文字位置

          // 绘制右下角二维码
          uni.getImageInfo({
            src: mock.value?.qrCodeImageUrl,
            success: (qrRes) => {
              ctx.drawImage(qrRes.path, data?.width - 104, data?.height - 104, 84, 84) // 调整二维码位置、大小和圆角
              ctx.draw(false, () => {
                // 绘制完成后的回调，可以在这里做其他事情，比如更新页面状态
              })
            },
            fail: (err) => {
              console.error('加载二维码图片失败:', err)
            },
          })
        },
        fail: (err) => {
          console.error('加载底图失败:', err)
        },
      })
    })
    .exec()
}
onReady(()=>{
   init()
})
</script>