OTT 前端技术

off-screen-canvas 离屏渲染

Canvas的绘制功能都与canvas标签绑定在一起，这意味着Canvas API和DOM是耦合的。而OffscreenCanvas，将Canvas移出屏幕来解耦了DOM和Canvas API，这种解耦也让Canvas速度提升了一些，更重要的是，将两者分离后，Canvas将可以在Web Worker中使用

• OffscreenCanvas 使用场景

  1. 在 Worker线程中实例一个OffScreenCanvas对象做后台渲染，再将渲染好的画布发送到主线程填充到canvas标签

    // work 进程中 创建canvas
    const canvas = new OffscreenCanvas(100, 100); //创建一个100*100的canvas画布
    const ctx = canvas.getContext('2d'); // canvas 画笔
  
    let image_bitmap = canvas.transferToImageBitmap(); // 转换成buffer 
    slef.postMessage({name:"TransferBuffer", buffer:image_bitmap}, [image_bitmap]); // 发送给主进程
  
    // 主进程中接受 并填充
    let render_worker = new Work('work.js')
    render_worker.onmessage = function(msg) {
      // 接受到的buffer
      if (msg.data.name === "TransferBuffer") {
        let context_2d = document.querySelector('canvas').getContext("2d");
        context_2d.drawImage(msg.data.buffer, 0, 0);
        //...
      }
    }
  
  

  2. 将Canvas 元素转换成 OffscreenCanvas，发送给 Worker 线程进行渲染，渲染的结果直接更新 Canvas 元素

    // 主线中将canvas转换成OffscreenCanvas，发送给work线程
    const offscreen = document.querySelector('canvas').transferControlToOffscreen();
    const worker = new Worker('work.js');
    worker.postMessage({ canvas: offscreen }, [offscreen]);
  
    // work线程中接受 操作
    slef.onmessage = function(evt){
      let OffscreenCanvas = evt.data.canvas; // 获取到canvas画布
      let ctx = OffscreenCanvas.getContext('2d');
      // ....
    }