- 当前 Bug 的表现(可附上截图)
初始化阶段
重新渲染
- 预期表现
通过wx:if=’'重新渲染后canvas标签有显示出来但是并没有在真机与模拟器上再次出现canvas图像
- 复现路径
- 提供一个最简复现 Demo
html
<view class=‘bac’ bindtap=‘test’></view>
<view wx:if=’{{show}}’>
<canvas style=“width: 300px; height: 200px;” canvas-id=“firstCanvas”></canvas>
</view>
css
.bac{
width: 100rpx;
height: 100rpx;
background: #000;
}
//js
Page({
data:{
show:true
},
test:function(){
let that = this;
if(that.data.show == true){
that.setData({
show:false
})
}else{
that.setData({
show:true
})
}
},
canvasIdErrorCallback: function (e) {
console.error(e.detail.errMsg)
},
onReady: function (e) {
// 使用 wx.createContext 获取绘图上下文 context
var context = wx.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()
}
})