微信小程序绘制canvas折线图（空心圆）

啊，新需求，绘制一个折线图，用小程序原生的canvas来写，不用echars，开始狂翻文档，这是效果图

程序员其实都很懒，能偷懒就偷懒咯，于是，我后面的图，搞成了一张背景图，然后只需要算每个格子的间距，画一下折线图就可以了
老规矩，直接贴代码

// html
// 为啥要在canvas上写一个定位，这个一会解释
<block wx:if="{{nowReport.dir == 'L'}}">
     <view class="canvas-box">
         <!-- 渲染canvas生成以后的图片，防止上下滑动时canvas抖动 -->
         <canvas
             canvas-id="CanvasImgRight"
             style="width:691rpx; height:747rpx;position:fixed;top:-999999rpx">
         </canvas>
         <image class="last-report" src="{{canvasSaveL}}" mode="widthFix" />
     </view>
     <view class="left">左耳听力图</view>
 </block>

// JS
// 这个位置的util.rpx2px是封装的一个转化px和rpx的方法
// 下面用于forEach的dataTableR，是一个数组，里面存放了x和y的坐标值，大概长这样
let dataTableR = [
    { x: 165, y: 640},
    { x: 245, y: 620},
    { x: 330, y: 610},
    { x: 412, y: 568},
    { x: 455, y: 540},
    { x: 497, y: 530},
    { x: 540, y: 520},
    { x: 582, y: 428}
  ]

let context = wx.createCanvasContext('CanvasImgRight')
	// 绘制背景图
   context.drawImage('../../../img/right-listen.jpg',util.rpx2px(0) ,util.rpx2px(0) , util.rpx2px(691) , util.rpx2px(747))
   // 设置描边颜色
   context.setStrokeStyle("#e41d4a")
   // 设置线宽
   context.setLineWidth(2);
   // 绘制点
   dataTableR.forEach(item =>{
     context.lineTo(util.rpx2px(item.x), util.rpx2px(item.y))
   })
   // 对当前路径进行描边
   context.stroke();
   
   // 设置描边颜色
   context.setStrokeStyle("#e41d4a")
   // 宽度
   context.setLineWidth(2)
   context.setLineCap('round')
   context.beginPath()

   // 绘制圆形区域
   dataTableR.forEach(item =>{
     context.moveTo(util.rpx2px(item.x) + util.rpx2px(7), util.rpx2px(item.y))
     context.arc(util.rpx2px(item.x), util.rpx2px(item.y), 4, 0, 2 * Math.PI, false)
   })
   context.stroke()
   // 在draw回调中拿到画好的canvas，然后出现生成图片
   context.draw(true, ()=>{
     wx.canvasToTempFilePath({
       x: 0,
       y: 0,
       width: 691,
       height: 747,
       canvasId: 'CanvasImgRight',
       success:(res)=> {
         this.data.canvasSaveR = res.tempFilePath
         this.setData( {
           canvasSaveR:this.data.canvasSaveR
         }) 
       }
     })
   })  
 }

好了，万事具备，真机测试一下，嗯，好像是有那么一回事，但是你上下滑动页面的时候，你就会发现，丢，canvas会随着你上下滑动页面时抖动，这可是一个不好的体验

各种百度，谷歌，有些说绑定方法，有一些建议使用echars，最后都尝试了一遍，毫无暖用，最后想到了一个取巧的方法，将绘制好的canvas生成图片，放在该放的位置不就完事了吗？

这里还有个问题，就是在html页面中的canvas容器，绘制canvas，我们是找到绑定到canvas中的ID的，如果使用生成以后的图片来替代当前的canvas的话，这个容器就不能还待在这个位置了，所以，直接用定位，把他置于显示容器之外，这样子就可以了