微信小程序：解决canvas错位的问题

问题：
使用canvas绘制二维码，当页面滚动时，二维码发生错位

解决方法：
将canvas通过wx.canvasToTempFilePath转为图片，页面通过image显示该图片即可

wxml页面canvas代码，通过css隐藏不显示

<!-- 兑换二维码 -->
<!-- 通过css（position:fixed; left:100%;）隐藏canvas -->
<canvas
    type="2d"
    id="qrcode"
    style="width:{{qr_width}}rpx; height:{{qr_width}}rpx; position:fixed; left:100%;"></canvas>

js代码

    // 生成兑换码
    generateExchangeQrcode(idx) {
        var that = this
        let text = JSON.stringify({
            coid: that.data.customer_openId,
            egp: that.data.merchant_info.meg[idx].p,
        })
        const query = wx.createSelectorQuery()
        query.select('#qrcode')
            .fields({ node: true, size: true })
            .exec((res) => {
                // 生成二维码
                const canvas = res[0].node
                drawQrcode({
                    canvas: canvas,
                    canvasId: 'qrcode',
                    width: that.data.qr_width,
                    padding: 25,
                    background: '#ffffff',
                    foreground: '#000000',
                    text: text,
                })
                // 保存二维码绘制结果到小程序临时目录
                that.saveExchangeQrcode2TempFilePath(canvas)
            })
    },

    // 保存二维码绘制结果到小程序临时目录
    saveExchangeQrcode2TempFilePath(canvas) {
        var that = this
        wx.canvasToTempFilePath({
            canvas: canvas,
            success(res) {
                that.setData({ 
                    exchangeQrcodeFilePath: res.tempFilePath,
                })
            },
            fail(err) {
                console.log(err)
            }
        })
    },