安卓 canvas组件draw函数的回调不执行
canvas遮挡了底部按钮，canvas在组件的组件内，按钮在页面
方法一：
cover-view包裹页面按钮，ios没问题，安卓还是被canvas遮挡；又把按钮放到组件内，嵌套在canvas内还是被遮挡；
方法二：
2、canvas转图片，ios没问题，安卓draw()的回调不执行，下面的代码只能打印到‘开始画’，然后就是fail了。
很多人碰到canvas的draw()回调不执行的问题
setTimeout(() => {
console.log('开始画');
ctx.draw(true, () => {
console.log('开始转换');
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 690,
height: 552,
canvasId: canvasId,
success: res => {
console.log('success', res.tempFilePath)
},
fail: err => {
// eslint-disable-next-line
console.log('fail', err, err.stack);
}
}, this);
});
}, 4000);
解决方案：
- canvas放在组件内 draw() 回调不执行，放在 page内可以执行
- 出现这个问题，放在page里draw回调可以执行，放在组件里就不行
转载来自微信开放社区
Canvas 第二次draw回调失效，图片不显示
想要多次保存文件，但是图不是相同的，实际场景是要画3张不同的图，实际场景是根据接口返回的数据 canvas生成三张不同样式的名片 用户选择喜欢的样式保存图片到相册。
ctx.draw(false, () => {
drawed.call(this);
});
ctx.draw(true, () => {
drawed.call(this);
});
画图的API用起来感觉一次操作没完的时候，进行第二次操作有会问题。之前我碰见的是 canvas 转数组的API，不能连续调用。。也是必须一次转换完成之后，才能进行第二次。如果有必要的话，你也可以考虑用多个canvas试试，看能不能同时进行
解决方案：
- 递归
const app = getApp()
Page({
data: {
imgList:[]
},
onReady: function() {
this.ctx = wx.createCanvasContext("canvas")
this.list = ["red","yellow","blue"]
this.index = 0
this.drawFn()
},
drawFn: function(){
if(this.index{
wx.canvasToTempFilePath({
canvasId: 'canvas',
success:res=>{
console.log(res)
this.data.imgList.push(res.tempFilePath)
this.setData({
imgList: this.data.imgList
})
this.index++
this.drawFn()
}
}, this)
})
}
}
})
转载自 微信开放社区
画布canvas.draw方法callback真机下不执行的问题解决
CanvasContext.draw(boolean reserve, function callback) 一些场景中部分真机 callback 回调未触发的问题分析与解决
ctx.setFillStyle('#F83');
ctx.fillRect(0, 0, 400, 800);
ctx.draw(true,()=>{//第一次调用draw方法
if (hasImage) {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
const tempFilePaths = res.tempFilePaths
ctx.drawImage(tempFilePaths[0], 10, 10, 300, 300); //做了一个画图动作
ctx.draw(true, drawAfterToTempFile); //第二次调用draw方法，真机下drawAfterToTempFile方法会被执行
}
})
} else { //完成最后绘制
//部分真机下drawAfterToTempFile回调不会被执行
ctx.draw(true, drawAfterToTempFile);//第二次调用draw方法
//猜测由于第二次调用draw方法与第一次调用之间画布没有任何其它动作，所以第二次draw方法并没有实际执行到触发callback回调的地方，导致callback看似失效。
//修改方法一：在第二次调用draw方法之前执行一些动作，例如：ctx.moveTo(0,0);ctx.fill();
//修改方法二：既然第二次调用draw方法没有任何绘制动作，那就直接调用执行drawAfterToTempFile()就行了，没必要包一个draw方法。
}
});
var drawAfterToTempFile = function() {
wx.canvasToTempFilePath({
canvasId: "myCanvasId",
success(res) {
console.log('绘制图片存为临时文件：', res.tempFilePath)
},
fail(err) {
console.log('绘制图片存为临时文件失败：', err);
}
}, _this)
}
转载自微信开放社区
最终解决问题的是，最后的这个方法，使canvasContext发生需要draw的变更。特此记录
2019-08-23
于上海