微信版本号： 7.0.19

所用api canvas

要做一个图片上的路线示意图，画布是1920*1330的，比较大，要求能在屏幕内画出规定位置的点和线，同时随着画布的移动来移动，但是在编译器上很完美，但是真机的时候，画的线不跟着移动

贴一下代码

<view class="contain">
  <canvas canvas-id="myCanvas" style="width: 1920px;height: 1331px;" />
</view>

 drawCanvas() {
    let context = wx.createCanvasContext('myCanvas')
    context.clearRect(0,0,1920,1331); 
    context.draw(true); 
    context.lineWidth = 3;
    let colors = ['#fff','#fff', 'red'];
    let that = this;
    wx.showLoading({
      title: '加载中',
    });
    let url = '';
    
    wx.request({
      url: url,
      header:{
        "Content-Type": "applciation/text"
      },
      method:'GET',
      success:function(res){
     
        if(res.data.code == 200 && &&  ){
          let table = res.data.data;
          for(let i=0; i<table.length-1;i++) { 
          
              context.beginPath()
              let point1 = { left: table[i].terminalx*100, top: table[i].terminaly*100 };//第一个点
              let point2 = { left: table[i+1].terminalx*100, top: table[i+1].terminaly*100 };//第二个点
              context.moveTo(point1.left, point1.top);//起始位置
              context.lineTo(point2.left, point2.top);//停止位置
              var grd = context.createLinearGradient(point1.left, point1.top, point2.left, point2.top); //线性渐变的起止坐标  
              for (var j=0; j<colors.length; j++) {  
                  grd.addColorStop(j / colors.length, colors[j]);  
              }  
              context.strokeStyle = grd;  
              context.stroke();
              context.closePath();
            
          }
          context.fillStyle="#fff";
          context.strokeStyle = "red";
          context.beginPath();
          context.arc(table[0].terminalx*100,table[0].terminaly*100,10,0,2*Math.PI);
          context.stroke();
          context.fill();
          context.closePath();

          context.draw()
          that.setData({
            table: table
          })
          wx.hideLoading();
        } else {
          that.setData({
            table: []
          })
          wx.hideLoading();
          wx.showToast({
            title: '暂无数据',
            icon: 'none',
            duration: 2000
          });
        }
      },
      fail:function(err){
        wx.hideLoading();
        console.log('err=============='+err)
      }
    })
  },