我们的canvas需要先隐藏后显示,但是canvas是原生组件不能动态创建隐藏。因此采用left:9999px的方式先隐藏canvas
基于微信小程序官方canvas demo 进行如下修改
<wxml/>
<view class="fixed" style="{{isInit ? '' : 'left:9999px'}}">
<canvas
type="2d"
id="canvas"
style="width: 300px; height: 300px;"
></canvas>
</view>
<wxss>
.intro {
margin: 30px;
text-align: center;
}
canvas-components {
width: 400px;
height: 400px;
}
.fixed {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100px;
}
<js>
data: {
isInit: false,
},
onLoad: function () {
this.position = {
x: 150,
y: 150,
vx: 2,
vy: 2
}
this.x = -100
const that = this;
setTimeout(()=>{
that.setData({
isInit:true
}, ()=>{
wx.createSelectorQuery()
.select('#canvas')
.fields({
node: true,
size: true,
})
.exec(that.init.bind(that))
});
}, 1000)
},
请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。