uni-app使用vue3版本在uni-popup组件中使用canvas绘制图形第一次打开正常绘制第二次打开canvas不显示

uni-app使用vue3版本在uni-popup组件中使用canvas绘制图形第一次打开正常绘制第二次打开canvas不显示

# 基本信息被移除

## 示例代码：

```html
<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>

操作步骤：

ni-app使用vue3版本，在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示

预期结果：

在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示

实际结果：

在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示

bug描述：

uni-app使用vue3版本，在uni-popup组件中，使用canvas绘制图形，第一次打开正常绘制，第二次打开canvas不显示


更多关于uni-app使用vue3版本在uni-popup组件中使用canvas绘制图形第一次打开正常绘制第二次打开canvas不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

华为畅享60测试也是 在uni-popup组件中，使用canvas绘制图形第一次打开正常绘制，第二次打开canvas不显示

更多关于uni-app使用vue3版本在uni-popup组件中使用canvas绘制图形第一次打开正常绘制第二次打开canvas不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


试试这个临时方案：https://ask.dcloud.net.cn/question/144221
看结果应该是关闭popup的时候canvas不可见了，再打开时并没有恢复canvas的可见状态

这是一个常见的uni-popup与canvas配合使用时的渲染问题。主要原因是uni-popup在关闭时会销毁内部DOM结构，导致canvas上下文丢失。以下是解决方案：

  1. 每次打开弹窗时重新初始化canvas：
open() {
    this.$refs.popup.open()
    setTimeout(() => {
        this.draw()
    }, 500)
}
  1. 或者在draw方法中添加canvas上下文检测：
draw() {
    const ctx = uni.createCanvasContext('firstCanvas')
    if(!ctx) return
    
    // 原有绘制代码
    ctx.draw(true) // 使用true参数强制重绘
}
  1. 也可以考虑在popup的open事件中触发绘制：
<uni-popup ref="popup" type="bottom" @change="onPopupChange">

methods: {
    onPopupChange(e) {
        if(e.show) {
            this.$nextTick(() => {
                this.draw()
            })
        }
    }
}
回到顶部