Javascript 如何让pixi扩展画布并放大？_Javascript_Html_Canvas_Pixi.js

Javascript 如何让pixi扩展画布并放大？

javascript html canvas

Javascript 如何让pixi扩展画布并放大？,javascript,html,canvas,pixi.js,Javascript,Html,Canvas,Pixi.js,我正在制作一个游戏，使用640x480像素的画布进行渲染。你可以想象，在PC上查看时，这是非常小的。我想实现这一点：我想增加画布的大小，使其填满整个屏幕我想放大内容，使其在不改变纵横比的情况下尽可能填满如果上一步还有剩余空间，我想将画布居中当我在pixi搜索如何做到这一点时，我可以分别找到每一个。但是我想知道如何在一个地方完成这一切以及stackoverflow，因为您通常希望同时完成所有这些事情我修改了本例中创建者制作的源代码：以下是我的想法： <!DOCTYPE HTML&

我正在制作一个游戏，使用640x480像素的画布进行渲染。你可以想象，在PC上查看时，这是非常小的。我想实现这一点：

我想增加画布的大小，使其填满整个屏幕

我想放大内容，使其在不改变纵横比的情况下尽可能填满

如果上一步还有剩余空间，我想将画布居中

当我在pixi搜索如何做到这一点时，我可以分别找到每一个。但是我想知道如何在一个地方完成这一切以及stackoverflow，因为您通常希望同时完成所有这些事情

我修改了本例中创建者制作的源代码：

以下是我的想法：

<!DOCTYPE HTML>
<html>
<head>
    <title>pixi.js example 1</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #000000;
        }
    </style>
    <script src="pixi.js"></script>

</head>
<body>
    <script>

    // create an new instance of a pixi stage
    var stage = new PIXI.Stage(0x66FF99);

    // create a renderer instance
    var renderer = PIXI.autoDetectRenderer(400, 300);
    renderer.resize(800, 600);

    // add the renderer view element to the DOM
    document.body.appendChild(renderer.view);

    requestAnimFrame( animate );

    // create a texture from an image path
    var texture = PIXI.Texture.fromImage("bunny.png");
    // create a new Sprite using the texture
    var bunny = new PIXI.Sprite(texture);

    // center the sprites anchor point
    bunny.anchor.x = 0.5;
    bunny.anchor.y = 0.5;

    // move the sprite t the center of the screen
    bunny.position.x = 200;
    bunny.position.y = 150;

    var container = new PIXI.DisplayObjectContainer();
    container.scale.x = 2;
    container.scale.y = 2;
    container.addChild(bunny);
    stage.addChild(container);

    function animate() {

        requestAnimFrame( animate );

        // just for fun, lets rotate mr rabbit a little
        bunny.rotation += 0.1;

        // render the stage
        renderer.render(stage);
    }

    </script>

    </body>
</html>


pixi.js示例1
身体{
保证金：0；
填充：0；
背景色：#000000；
}
//创建pixi阶段的新实例
var stage=新的PIXI.stage（0x66FF99）；
//创建渲染器实例
var renderer=PIXI.autodetectedrenderer（400300）；
渲染器。调整大小（800600）；
//将renderer视图元素添加到DOM中
document.body.appendChild（renderer.view）；
请求动画帧（动画）；
//从图像路径创建纹理
var texture=PIXI.texture.fromImage（“bunny.png”）；
//使用纹理创建新的精灵
var bunny=新的PIXI.Sprite（纹理）；
//将精灵定位点居中
兔锚x=0.5；
兔锚y=0.5；
//将精灵移动到屏幕中央
兔子位置x=200；
兔位置y=150；
var container=new PIXI.DisplayObjectContainer（）；
容器。比例x=2；
容器刻度y=2；
容器。addChild（bunny）；
stage.addChild（容器）；
函数animate（）{
请求动画帧（动画）；
//只是为了好玩，让兔子先生转一转
兔子旋转+=0.1；
//上台
渲染器。渲染（舞台）；
}

现在我没有做的一件事是居中。我认为有两种可能的方法可以做到这一点。我可以使用CSS来居中

画布（我可能会使用），或者我可以在代码中这样做，通过在居中容器的舞台上添加另一个外部显示对象来居中
我还没有使用Pixi，但是阅读文档可能会对CanvasRenderer API有1/2点帮助（1.属性宽度/高度-2.调整大小方法）. @也许你看到了我没有看到的东西。看起来这只对第一点有帮助