小程序自适应canvas

wxml

<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="qrcCanvas"/>

<input value='{{qrcStr}}' bindblur="onQrcStrBlur" type="text" maxlength="255" />

js

data:{
    qrStr:'xxx'  需要生成字段
    canvasId: "qrcCanvas",// 需要绘画的元素
 }
 
 // 适配不同屏幕大小的 canvas  
   setCanvasSize(){var size={};  
     try {var res = wx.getSystemInfoSync();  
         var scale = 750/686;// 不同屏幕下 canvas 的适配比例；设计稿是 750 宽  
         var width = res.windowWidth/scale;  
         var height = width;//canvas 画布为正方形  
         size.w = width;  
         size.h = height;  
       } catch (e) {  
         // Do something when catch error  
         console.log("获取设备信息失败"+e);  
       }   
     return size;  // 返回大小
   } ,  
   
   createQrCode(str,canvasId,cavW,cavH){  
       // 调用插件中的 draw 方法，绘制二维码图片  
       qrCode.api.draw(str,canvasId,cavW,cavH);  
     
    },  
     
   // 获取 input 输入的值  
   onQrcStrBlur(e) {this.setData({qrcStr: e.detail.value});  
   },  
     
   // 在  onReady 调用
   onReady: function() {let size = this.setCanvasSize();// 动态设置画布大小  
       this.createQrCode(this.data.qrcStr, this.canvasId, size.w, size.h);  
    },