圈起来部分在真机上不显示 代码如下:
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毫秒延时是为了解决小程序绘制过程中的渲染问题
});