问题模块 框架类型 问题类型 操作系统版本 手机型号 微信版本
客户端 微信小程序 Bug MIUI9.6 红米4A 6.7.3

- 当前 Bug 的表现（可附上截图）




- 代码
let ctx = wx.createCanvasContext('canvas_course')
let w = 686
let h = 686
//绘画
ctx.setFillStyle('white')
ctx.fillRect(0, 0, w, h)
//阴影
ctx.save()
ctx.setFillStyle('#fff')
ctx.setShadow(0, 2, 16, 'rgba(0,0,0,0.08)')
ctx.fillRect(0, 0, w, h / 2 + 92)
ctx.restore()
//封面
ctx.drawImage(data[1].path, 0, 0, w, h/2)
//li图标
ctx.drawImage('/img/users.png', 39, h / 2 + 30, 32, 32)
ctx.drawImage('/img/address-book.png', w/3+39, h / 2 + 30, 32, 32)
ctx.drawImage('/img/time.png', w/3*2+39, h / 2 + 30, 32, 32)
//二维码
ctx.drawImage(data[0].path, w-208, h-223, 176, 176)
//封面遮罩
ctx.setFillStyle('rgba(0,0,0,0.5)')
ctx.fillRect(0, w/2-80, w, 80)
//标题
ctx.save()
ctx.setFontSize(34)
ctx.setFillStyle('#ffffff')
ctx.setTextAlign('left')
ctx.setTextBaseline('middle')
ctx.fillText(this.data.info.title, 24, w/2-40)
ctx.restore()
//li标题
ctx.save()
ctx.setFontSize(22)
ctx.setFillStyle('#b2b2b2')
ctx.setTextAlign('center')
ctx.setTextBaseline('normal')
ctx.fillText('适合阶段', w / 6 + 20, h / 2 + 40)
ctx.fillText('班级规模', w / 2 + 20, h / 2 + 40)
ctx.fillText('课程时长', w / 6 * 5 + 20, h / 2 + 40)
//li内容
ctx.setFillStyle('#3E3939')
ctx.fillText(this.data.info.age, w / 6 + 20, h / 2 + 70)
ctx.fillText(this.data.info.size, w / 2 + 20, h / 2 + 70)
ctx.fillText(this.data.info.duration, w / 6 * 5 + 20, h / 2 + 70)
ctx.restore()
//地址
ctx.save()
ctx.setFontSize(22)
ctx.setFillStyle('#888888')
ctx.setTextAlign('left')
ctx.setTextBaseline('normal')
ctx.fillText(this.data.info.addr, 32, h-113)
ctx.restore()
//底部提示
ctx.save()
ctx.setFontSize(28)
ctx.setFillStyle('#888888')
ctx.setTextAlign('left')
ctx.setTextBaseline('normal')
ctx.fillText('长按识别微信小程序，查看详情', 32, h - 49)
ctx.restore()
//价格信息
if(this.data.info.price_now === 0){
this.priceFree(ctx)
}else if(this.data.info.price === this.data.info.price_now){
this.priceNormal(ctx)
}else{
this.priceRebate(ctx)
}
//绘制保存
ctx.draw(false, () => {
setTimeout(() => {
wx.canvasToTempFilePath({
width: w,
height: h,
destWidth: w,
destHeight: h,
canvasId: 'canvas_course',
success: (res) => {
this.data.canvas = res.tempFilePath
wx.hideLoading()
}
})
}, 100)
})

微信小程序开发问题解答