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

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

         const app = new PIXI.Application({  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({  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 这类函数  参数一般都用画布 就行了 其他类型别用  他获取的都是原来的图片大小来计算的

原文地址:https://www.cnblogs.com/newmiracle/p/13847741.html