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>
