创建舞台（stage）和画布（renderer）

创建Pixi应用和 `舞台`

现在你可以开始使用Pixi！

但是怎么用？

第一步就是去创建一个可以显示图片的矩形显示区。Pixi拥有一个Pixi应用对象来帮助你创建它。它会自动创建一个<canvas>HTML标签并且计算出怎么去让你的图片在这个标签中显示。你现在需要创建一个特殊的Pixi容器对象，他被称作舞台。正如你所见，这个舞台对象将会被当作根容器而使用，它将包裹所有你想用Pixi显示的东西。

这里是你需要创建一个名叫app的Pixi应用对象和一个舞台的必要的代码。这些代码需要在你的HTML文档中以<script>标签包裹。

//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的最基本的代码。它在你的文档中创建了一个256像素宽高的黑色canvas标签。当你运行这个代码的时候浏览器应该显示成这样：

Basic display

啊哈, 一个 black square!

PIXI.Application算出了应该使用Canvas还是WebGL去渲染图象，它取决于你正在使用的浏览器支持哪一个。它的参数是一个被称作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的文档吧：
PIXI.Application.

这些设置做了些什么呢？
antialias使得字体的边界和几何图形更加圆滑（WebGL的anti-aliasing在所有平台都不可用，所以你需要在你的游戏的标签平台上测试他们）。transparent将整个Canvs标签的透明度进行了设置。resolution让Pixi在不同的分辨率和像素密度的平台上运行变得简单。设置分辨率对于这个教程而言有些超纲了，到那时你可以看Mat Grove’sexplanation之中是如何使用resolution的所有细节的。但是平常，只要保持resolution是1，就可以应付大多数工程了。

Pixi的画布对象将会默认选择WebGL引擎渲染模式，它更快并且可以让你使用一些壮观的视觉特效————如果你把他们都学了。但是如果你需要强制使用Canvas引擎绘制而抛弃WebGL，你可以设置forceCanvas选项为true，像这样：

forceCanvas: true,

如果你需要在你创建canvs标签之后改变它的背景色，设置 app.renderer对象的backgroundColor属性为一个任何的十六进制颜色：

app.renderer.backgroundColor = 0x061639;

如果你想要去找到画布的宽高，使用app.renderer.view.width 和app.renderer.view.height。

使用画布的resize方法可以改变canvas的大小，提供任何新的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);

但是，如果你这么做了，要记得把padding和margin都设置成0：

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

(*这个通配符, 是CSS选择所有HTML元素的意思。)

如果你想要canvs在任何浏览器中统一尺寸，你可以使用scaleToWindow 成员函数.

创建Pixi应用和 舞台

创建Pixi应用和 `舞台`