小程序自适应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);  
    },