圈起来部分在真机上不显示 代码如下：
let ctx = wx.createCanvasContext('customCanvas')
let text = res.goods_list[0].goods_name
let textTeam = res.team_name
ctx.beginPath()
ctx.setFillStyle('#000')
ctx.setFontSize(16)
// 中间文字
that.dealWords({
//画布上下文
ctx: ctx,
//字体大小
fontSize: 22,
//需要处理的文字
word: text,
//一行文字最大宽度
maxWidth: 290,
//文字在x轴要显示的位置
x: 50,
//文字在y轴要显示的位置
y: 110,
//文字最多显示的行数
maxLine: 1
})
// 底部图片圆
let x =50;
for(let i =0;i<3;i++){
console.log(res.goods_list[i].goods_pic,i)
if(i==0){
ctx.drawImage(res.goods_list[i].goods_pic,x, 170, 80, 80);
}else{
ctx.drawImage(res.goods_list[i].goods_pic, x += 100, 170, 80, 80);
}
}
// 底部文字
ctx.setFillStyle('gray')
that.dealWords({
ctx: ctx,
fontSize: 16,
word: textTeam,
maxWidth: 230,
x: 50,
y: 136,
maxLine: 2
})
// 通过回调把canvas画布生成图片
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
canvasId: 'customCanvas',
success: (res) => {
let thatsz = thats1
console.log(res.tempFilePath)
wx.saveFile({
//把文件保存到本地
tempFilePath: res.tempFilePath,
success: function (resl) {
console.log(resl.savedFilePath)
thatsz.setData({
picUrl: resl.savedFilePath
});
}
})
}
}, that);
}, 300); //此处加入300毫秒延时是为了解决小程序绘制过程中的渲染问题
});
先把图片down下来，做成二进制数据，然后画
大佬 能提供下那部分代码嘛？
你图片保存本地，使用wx.downloadFile 保存下来
如果图片不是本地数据，会有bug的。模拟机上canvas是一个假的div，真机上才是真的原生组件
好的 。 谢谢大佬
let x = 50;
for (let i = 0; i < 3; i++) {
wx.downloadFile({
url: res.goods_list[i].goods_pic,
success: function (res) {
console.log(res.tempFilePath)
if (i == 0) {
ctx.drawImage(res.tempFilePath, x, 170, 80, 80);
} else {
ctx.drawImage(res.tempFilePath, x += 100, 170, 80, 80);
}
}
})
}
这样写模拟器上也出不来了- - 什么情况呀 还是我写的不对呢？