创建Pixi应用和stage

现在我们来使用Pixi。

第一步是使用Pixi上的Application对象创建一个矩形显示区域。 它会自动生成一个HTML <canvas>元素，然后在canvas画布上显示图像。 之后，您需要创建一个称为stage（舞台）的特殊Pixi容器对象。 就像您将在后面看到的那样，该舞台对象将根容器来保存您希望Pixi显示的东西。

下面是创建Pixi应用程序和stage（舞台）需要编写的代码。将此代码添加到<script>标记之间的HTML文档中

//Create a Pixi Application
let app = new PIXI.Application({width: 256, height: 256});

//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);

这是开始使用Pixi所需要编写的最基本的代码。它会在你的HTML页面上生成一个256像素×256像素的黑色canvas元素。下面是在浏览器中运行这段代码时的情况。

没错，就是一个黑色方块！

PIXI.Application会自动选择使用Canvas或者是WebGL来渲染图形，这取决于您的浏览器支持情况。PIXI.Application有一个options对象。在本例中，它的width和height属性用来设置Canvas画布的宽度和高度（以像素为单位）。您可以在这个options对象中设置更多的可选属性;下面是如何使用它来设置反锯齿，透明度和分辨率。

let app = new PIXI.Application({ 
    width: 256,         // default: 800 宽度
    height: 256,        // default: 600 高度
    antialias: true,    // default: false 反锯齿
    transparent: false, // default: false 透明度
    resolution: 1       // default: 1 分辨率
  }
);

如果您需要修改Pixi的默认配置，请参阅Pixi.application文档。

这些选项有什么用?antialias使字体和图形边缘更加平滑。(WebGL的抗锯齿并不是在所有的平台上都可用，所以你需要在你的游戏目标平台上进行测试。)transparent使canvas背景透明。resolution用于不同分辨率和像素密度下。设置分辨率超出了本教程的范围，你可以在Mat Grove's explanation了解详细用法。通常，resolution默认设置为1就可以了。

因为WebGL非常快，所以Pixi的renderer对象将默认为WebGL。如果您想使用canvas绘图API，可以将forceCanvas选项设置为true，如下所示：

forceCanvas: true,

如果创建画布后需要更改背景颜色，请将app.renderer对象的backgroundColor属性设置为十六进制颜色值：

app.renderer.backgroundColor = 0x061639;

如果您想查看渲染器的宽度或高度，请使用app.renderer.view.width和app.renderer.view.height。

要更改画布的大小，请使用renderer的resize方法，并提供任何新的width和height值。但是，为了确保画布的大小调整到与分辨率匹配，请将autoResize设置为true。

app.renderer.autoResize = true;
app.renderer.resize(512, 512);

如果您想让canvas画布填充整个窗口，您可以应用下面的CSS样式并将渲染器的大小调整到浏览器窗口的大小。

app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);

另外，请确保所有HTML元素的默认内边距和边距设置为0：

<style>* {padding: 0; margin: 0}</style>

如果希望画布按比例缩放到任何浏览器窗口大小，可以使用这个自定义的scaleToWindow函数。