PixiJS创建应用

回顾

前面成功引入了Pixi，现在可以开始使用Pixi了

创建一个名叫app的Pixi应用对象

let app = new PIXI.Application({
  width: 750, // default: 800 宽度
  height: 1448, // default: 600 高度
  // antialias: true, // default: false 反锯齿，设置为true使得字体的边界和几何图形更加圆滑
  // transparent: false, // default: false 透明度，设置为true将整个Canvs标签的透明度进行了设置
  // resolution: 1 // default: 1 分辨率
});

将应用插入舞台区域

• 在 index.html 的body标签中插入：
  
• 获取上面插入的div元素，并将Pixi应用插入到该元素中：

document.getElementById("demo_stage").appendChild(app.view);

• index.html 完整代码如下：

  此时，浏览器访问页面会看到页面创建了一个宽750像素，高1448像素的黑色canvas标签，该标签的父元素就是id为demo_stage的div元素。浏览器显示如下：
  

• 我们可以看到黑色canvas周围有空白区域，那是因为body标签有默认的margin值，设置样式取消即可：
  在 index.html 的head标签中插入样式：

此时浏览器显示如下：

• 设置overflow: hidden;隐藏滚动条

到此应用创建完毕！

上面是将应用插入到div元素中，如果直接使用canvas元素呢？

1. 修改 index.html 文件，将div改成canvas

2. 新增Pixi应用参数

view: document.getElementById("demo_stage")

3. 注释下面代码：

// document.getElementById("demo_stage").appendChild(app.view);

index.html 文件完整代码如下：

此时浏览器显示如下：

总结

PixiJS创建应用的两种方式：
方式一：使用div元素包裹应用

需要将应用插入div元素中，无需设置view属性；

方式二：直接使用canvas

设置view属性为canvas元素即可