1、创建canvas
let ctx = wx.createCanvasContext('canvasPoster') // canvasPoster 是 canvas-id
2、添加文字
// 字号
ctx.setFontSize(16)
// 字体颜色
ctx.setFillStyle('#2F3234')
// 加粗
ctx.fillText(title, 15, curheight - 0.1)
ctx.fillText(title, 15 - 0.1, curheight)
ctx.fillText(title, 15, curheight)
ctx.fillText(title, 15, curheight + 0.1)
ctx.fillText(title, 15 + 0.1, curheight)
3、添加直线
ctx.moveTo(15, curheight)
ctx.lineTo(550 - 15, curheight)
4、矩形(一般当作白色背景)
ctx.setFillStyle('#FFFFFF')
ctx.fillRect(0, 0, 550, 1000)
5、图片
ctx.drawImage(url, 0, 0, 550 * ratio, curheight)
6、圆形头像
ctx.save()
ctx.beginPath()
ctx.arc(15 + r, curheight + r, r, 0, 2 * Math.PI, false)
ctx.clip()
ctx.drawImage(img, 15, curheight, r * 2, r * 2)
ctx.restore()
7、canvas 内容会随背景一起滚动的问题解决:背景高度100vh,overflow: hidden
禁止 iphone 会上下滑动: config: {disableScroll:true}, 背景高度100vh,overflow-y: scroll
8、待整理……