<template>
<view class="">
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
open() {
this.$refs.popup.open()
setTimeout(() => {
this.draw()
}, 500)
},
draw() {
var context = uni.createCanvasContext('firstCanvas')
context.setStrokeStyle("#00ff00")
context.setLineWidth(5)
context.rect(0, 0, 200, 200)
context.stroke()
context.setStrokeStyle("#ff0000")
context.setLineWidth(2)
context.moveTo(160, 100)
context.arc(100, 100, 60, 0, 2 * Math.PI, true)
context.moveTo(140, 100)
context.arc(100, 100, 40, 0, Math.PI, false)
context.moveTo(85, 80)
context.arc(80, 80, 5, 0, 2 * Math.PI, true)
context.moveTo(125, 80)
context.arc(120, 80, 5, 0, 2 * Math.PI, true)
context.stroke()
context.draw()
}
}
}
</script>
迷你猩
- 发布：2023-10-13 16:12
- 更新：2024-03-01 17:21
- 阅读：708
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win 11
HBuilderX类型： 正式
HBuilderX版本号： 3.8.12
手机系统： Android
手机系统版本号： Android 10
手机厂商： 小米
手机机型： Redmi Note 9 Pro
页面类型： vue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
ni-app使用vue3版本，在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
ni-app使用vue3版本，在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
预期结果：
在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
实际结果：
在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
bug描述：
uni-app使用vue3版本，在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示
2 个回复
迷你猩 (作者)
华为畅享60测试也是 在uni-popup组件中，使用canvas绘制图形第一次打开正常绘制，第二次打开canvas不显示
Robby
试试这个临时方案：https://ask.dcloud.net.cn/question/144221
看结果应该是关闭popup的时候canvas不可见了，再打开时并没有恢复canvas的可见状态