pixijs離屏渲染的方法(canvas渲染canvas)

pixijs離屏渲染的方法(canvas渲染canvas)

         const app = new PIXI.Application({ width: 750, height: 1206,transparent:true });
    document.body.appendChild(app.view);
            PIXI.Loader.shared
        .add('/moban/images/closebtn1.png')
        .add('/moban/images/share.jpg')
        .load(onAssetsLoaded);
         function onAssetsLoaded(loader, res) {

  //填充下背景
  var graphics1 = new PIXI.Graphics();
    graphics1.beginFill(0xFF001F, 1);
    graphics1.drawRoundedRect(0, 0, app.screen.width, app.screen.height, 0);
    graphics1.endFill();
    graphics1.name = "dianjiquyu";

    app.stage.addChild(graphics1);


    graphics1.interactive = true;
   graphics1
        .on('pointerdown', onDragStart)          

            //這個圖片大小是200*200
                var bunny = PIXI.Sprite.from('/moban/images/share.jpg');
  
              bunny.width=50;
              bunny.height=50;
            bunny.x=500;
          bunny.y=300;


          app.stage.addChild(bunny);

     const app1 = new PIXI.Application({ width: 750, height: 1106,transparent:true });
    document.body.appendChild(app1.view); 




    var bunny = PIXI.Sprite.from('/moban/images/share.jpg');
  
              bunny.width=150;
              bunny.height=150;
            bunny.x=100;
          bunny.y=300;


          app1.stage.addChild(bunny);

     setTimeout(function(){
              let btexture = new PIXI.BaseTexture($('canvas')[1]);

        let sprite = new PIXI.Sprite(new PIXI.Texture(btexture));
   sprite.x=0;
     sprite.y=0;   
app.stage.addChild(sprite);
$('canvas')[1].remove();

},300)

渲染好 再移除掉原來的就行了

 

再補充下

app.renderer.extract 這類函數  參數一般都用畫布 就行了 其他類型別用  他獲取的都是原來的圖片大小來計算的