前端 canvas双缓冲（离屏）渲染

离屏渲染（Offscreen Rendering）是指在屏幕外的内存中进行图像渲染，然后将渲染结果显示在屏幕上的技术。

// 获取离屏 Canvas 元素
    const offscreenCanvas = document.getElementById('offscreenCanvas');
    // 获取离屏 Canvas 的 2D 渲染上下文
    const offscreenContext = offscreenCanvas.getContext('2d');
    // 在离屏上下文中进行绘制
    offscreenContext.fillStyle = 'red';
    offscreenContext.fillRect(20, 20, 100, 100);
    // 将离屏渲染的图像显示在屏幕上
    const screenCanvas = document.createElement('canvas');
    screenCanvas.width = offscreenCanvas.width;
    screenCanvas.height = offscreenCanvas.height;
    const screenContext = screenCanvas.getContext('2d');
    screenContext.drawImage(offscreenCanvas, 0, 0);
    document.body.appendChild(screenCanvas);

简单来讲，就是有两个Canvas元素，在浏览器中，Canvas渲染是非常消耗资源的，我们通过在后台将Canvas画布画完以后，将最终结果绘制到需要渲染的Canvas中，这样可以大幅降低渲染资源的消耗，有效解决白屏闪烁问题。

_getCtx(call = function() {}) {
    const _this = this
    const ctx = _this.tmpCtx
    const img = new Image()
    img.src = _this.imgUrl
    img.onload = function() {
      ctx.clearRect(0, 0, _this.width, _this.height)
      ctx.drawImage(img, 0, 0, _this.width, _this.height)
      call(_this, ctx, img)
      const MAIN_CTX = _this.MAIN_CTX
      MAIN_CTX.clearRect(0, 0, _this.width, _this.height)
      MAIN_CTX.drawImage(_this.tmpCanvas, 0, 0)
    }
  }

在上述代码中，ctx为离屏的canvas上下文，MAIN_CTX是最终需要渲染的Canvas上下文，所有计算操作在离屏Canvas上下文中（call用来执行相关逻辑），最终将结果绘制到MAIN_CTX中。