将<template>中的代码放到页面中，
script中的onReady(){}也整个放到页面中，canvas就可以绘制出图案。
但是做成组件，然后在页面中引用，就只有一个背景色，但是没有绘制出图案。
请问是哪里的问题？
另外，在可以绘制出水印的情况下，如果把onReady(){}中的代码，封装成一个方法，放到methods中，然后在onReady中调用，也无法绘制出图案
代码如下：
<template>
<view class="watermark">
<canvas id="hxbu" canvas-id="hxbu" style="width: 400px; height: 900px"/>
</view>
</template>
<script>
export default {
name: 'Watermark',
props: {
phone: {
type: String,
default: '123'
},
username: {
type: String,
default: '姓名'
}
},
data() {
return {}
},
onReady() {
const phone = this.phone
const username = this.username
let x = 50
let y = 100
const angle = 325 * Math.PI / 180
const ctx = uni.createCanvasContext('hxbu')
ctx.setFontSize(20)
ctx.setFillStyle('#888')
for (let i = 1; i < 28; i++) {
// 保存当前的绘图上下文状态
ctx.save()
// 将绘图上下文旋转325度
ctx.translate(x, y) // 移动到指定的绘制位置
ctx.rotate(angle)
// 绘制文字
ctx.fillText(phone, 0, 0, 100) // 从(0, 0)开始绘制
ctx.fillText(username, 5, 30, 95)
// 恢复绘图上下文状态
ctx.restore()
// 更新x和y坐标，以便下一次绘制
if (i % 4 === 0) {
x = 50
y += 180
} else {
x += 130
}
}
ctx.draw()
},
}
</script>
<style lang="scss">
.watermark {
position: fixed;
top: 0;
z-index: 20000;
width: 100%;
opacity: 0.1;
background: orange;
pointer-events: none;
}
</style>
nxs (作者)
感谢回复
有换成mounted，也是不行的。不是onReady中的代码没有执行，是执行了，但是没有绘制出文字。
在onReay中多处做了输出，分别是开始的位置，for循环中，和ctx.draw()之后，都做了console.log，都是可以正常输出的，但是就是没有绘制内容出来。
另外，整个watermark的css中有写background: orange，这个也是生效的
2024-03-20 17:12
JXWang
回复 nxs: 运行到哪个平台？是安卓吗
2024-03-20 18:54
JXWang
创建 canvas 绘图上下文（指定 canvasId）。在自定义组件下，第二个参数传入组件实例this，以操作组件内 <canvas/> 组件
2024-03-20 19:07
nxs (作者)
回复 JXWang: 非常感谢，再次去看了文档，原来您的回复在文档中就有，谢谢！
2024-03-21 09:38
JXWang
回复 nxs: 不客气
2024-03-21 10:08