小程序canvas 操作整理

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、待整理……