zoukankan      html  css  js  c++  java
  • 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 这类函数  参数一般都用画布 就行了 其他类型别用  他获取的都是原来的图片大小来计算的

  • 相关阅读:
    tcp/ip协议listen函数中backlog參数的含义
    oracle exp实例
    js21---单体(单例)模式
    js20---接口3种方式
    js19--继承终极版本
    js18--继承方式
    js17---创建对象:构造函数式和原型组合模式、动态原型模式、稳妥构造函数式
    js16--自定义原型对象
    js---15,模拟数组的ecah方法
    js14--原型2
  • 原文地址:https://www.cnblogs.com/newmiracle/p/13847741.html
Copyright © 2011-2022 走看看