off-screen-canvas 离屏渲染

2019-12-14 11:25:06

阅读:694
分类:知识点

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);
          //...
        }
      }
    
    
    1. 将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');
        // ....
      }
    
    

评论:

    X

    备案号 皖ICP备19021899号-1  技术支持 © 947968273@qq.com