js纯原生监听滚动条动态加载渲染canvas

最近接到了一个新需求，需要渲染一个超大canvas，canvas画布最大不超过两万，我需要渲染几十万的尺寸

当时定了两种方案
方案一：动态canvas渲染
方案二：拼接法渲染
由于需要完成跨屏选择和对canva是不太熟悉就选用了方案二

最开始用的满铺懒加载拼接，导致占用内存特别大，就优化成立动态移动拼接

废话不多说，直接贴代码

 /**
 *监听滚动，动态渲染
 *currentPosition 当前位置是第几个画布
 *expectedPosition 预渲染第几个画布
 *canvasHeight 画布高度
 *preRenderedHeight 触发预渲染高度
 *currentTop 上次的scrollTop高度
 *ctxBoxHeight 外出box高度
 *mainCanvasHeight 总画布高度
 */
    onscroll: function(e) {
      this.currentPosition = Math.ceil(e.target.scrollTop / this.canvasHeight) || 1
      if (this.currentTop <= e.target.scrollTop) {
        const Position = Math.ceil((e.target.scrollTop + this.preRenderedHeight) / this.canvasHeight)
        if (this.expectedPosition !== Position) {
          console.log('下:', Position)
          this.expectedPosition = Position
          this.render()
       	 }
      } else if (e.target.scrollTop > this.canvasHeight) {
        const Position = Math.ceil((e.target.scrollTop - this.preRenderedHeight) / this.canvasHeight || 1
        if (this.expectedPosition !== Position) {
          console.log('上:', Position)
          this.expectedPosition = Position
          this.render()
        }
      }
      if (e.target.scrollTop - this.currentTop > 1000) {
        console.log('下划:')
       
     	 } else if (this.currentTop - e.target.scrollTop > 1000) {
       		 console.log('上划')
      	}
      if (e.target.scrollTop + this.ctxBoxHeight >= this.mainCanvasHeight) {
       	console.log('尾')
     	}
      if (e.target.scrollTop === 0) {
      	 console.log('首')
     	}
      console.log('当前页:', this.currentPosition)
      this.currentTop = e.target.scrollTop
    },

/**
*mainCtxBOX 两个canvas画布的数组
*currentPosition 预渲染第几个画布
*用预渲染画布模运算2 计算出哪个画布渲染，currentPosition*画布高度计算出定位位置
*/
 this.renderMY(mainCtxBOX[currentPosition % 2], currentPosition)

这篇博客只是提供一个大致思路，如有疑问或建议欢迎留言讨论