本文章記錄了我在做小程序時(shí)使用canvas時(shí)，因?qū)蛹?jí)太高無(wú)法顯示彈框的問(wèn)題垦巴。
首先是在wxml頁(yè)面的處理媳搪，我的寬高設(shè)置的是自適應(yīng)寬高，只需改成自己的寬高即可骤宣，關(guān)鍵部分是加一個(gè)判斷 wx:if="{{!canvasImg}}"
<canvas style='width: {{windowWidth}}px; height: {{windowHeight}}px' bindtouchstart="canvasTouchStart" bindtouchmove="touchMove" bindtouchend="canvasTouchEnd" canvas-id="canvas" wx:if="{{!canvasImg}}"></canvas>
<image wx:else src="{{canvasImg}}" style="width: {{windowWidth}}px; height: {{windowHeight}}px" />
然后是js頁(yè)面秦爆，彈框結(jié)束時(shí)直接 canvasImg=null 即可
// 需要讓 彈窗等 出現(xiàn)在canvas上的事件
handleCanvarToImg() {
var that=this;
var windowWidth = that.data.windowWidth;
var windowHeight = that.data.windowHeight;
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: windowWidth,
height: windowHeight,
canvasId: 'canvas',
success: function(res) {
that.setData({ canvasImg: res.tempFilePath});
}
});
},
// 最后彈窗等消失時(shí)，觸發(fā)的事件中需將canvasImg初始化（=null）
