小程序绘制折线图横向滚动卡顿

代码如下

我将canvas标签包含在scroll-view中然后我绘制一个折线图，当折线图超出屏幕的时候会发生卡顿

<scroll-view class='scrollView' scroll-x="true">
   <canvas style="width: 2100rpx; height: 320rpx;" canvas-id="charts" class='charts' ></canvas>
  </scroll-view>
     

WechatIMG13.jpeg

如果所示，当左右滑动的时候会发生卡顿,

从网上搜索到一个比较好的思路是

把canvas绘制出来之后把这个画布保存成图片，以图片的形式显示到scroll中

context.draw()
    var _this = this;

    setTimeout(function() {
      wx.canvasToTempFilePath({
        canvasId: 'charts',
        success(res) {
          _this.setData({
            canvasSaveimg: res.tempFilePath
          })
        },
        complete(res) {
          console.log(res);
        }
      }, _this)
    },300)

如果不延时执行的话 报错

canvasToTempFilePath: fail canvas is empty

参考：https://blog.csdn.net/weixin_39872588/article/details/81014385