微信小程序canvas 自适应绘图

思路：

1.取到canvas（600rpx）在小程序自适应的真实宽度，和标准宽度（300px）进行计算，获得放大或缩小的比例
2.绘图中数值 * 比例，得出放大或缩小的真实数值

let w = 0 // 画布宽度
let h = 0 // 画布宽度
// 获取canvas标签
let ctx = wx.createCanvasContext('customCanvas')
// 获取canvas尺寸
let query = wx.createSelectorQuery()
query.select('#share').boundingClientRect()
query.exec(function (rect) {
    let res = rect[0]
    w = res.width
    h = res.height
    let baseNum = 300 // 标准画布宽度基数
    let ratio = w / baseNum // 自适应比例
    console.log('绘图开始')
    ctx.setFillStyle('#fff') // 背景颜色
    ctx.fillRect(0, 0, w, h)
    let img = {
        type: 'img',
        url: '图片链接'
    }
    let qrImg = {
        type: 'qrimg',
        url: '二维码链接'
    }
    // 图片统一转为本地图片
    let imgArr = [img, qrImg]
    let num = 0 // 转为本地图片数量
    // 将图片转为临时图片
    imgArr.map((value, key) => {
        wx.getImageInfo({
            src: value.url,
            success: function (res) {
                num++
                let path = res.path
                if (value.type == 'img') {
                    img.url = path
                }
                if (value.type == 'qrimg') {
                    qrImg.url = path
                }
                // 全部图片都转为临时图片后，继续绘图
                if (num == imgArr.length) {
                    // 绘图内容
                    ctx.drawImage(img.url, 0, 0, w, w)
                    // 二维码
                     ctx.drawImage(qrImg.url, 209 * ratio, 314 * ratio, 72 * ratio, 72 * ratio)
                    // 。。。中间代码省略
                    ctx.draw(true, setTimeout(function () {  // 加定时器是防止绘图未完成就生成图片导致图片内容不完整
                        // 生成本地图片
                        wx.canvasToTempFilePath({
                            x: 0, y: 0,
                            canvasId: 'customCanvas',
                            success: function (res) {
                                let path = res.tempFilePath
                                console.log(path)
                            },
                            fail: function (res) { }
                        })
                    }, 0))
                }
            }
        })
    })
})

效果图

微信图片_20201109114539.png

微信图片_20201109114547.png

微信图片_20201109114552.png