回顾
前面成功引入了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 id="demo_stage"></div> - 获取上面插入的div元素，并将Pixi应用插入到该元素中：
document.getElementById("demo_stage").appendChild(app.view);index.html 完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>pixi-demo</title> </head> <body> <div id="demo_stage"></div> <!-- 引入pixi --> <script src="js/pixi.min.js"></script> <script type="text/javascript"> // 判断当前浏览器是否支持WebGL，支持则使用WebGL渲染，反之使用canvas渲染 let type = "WebGL"; if (!PIXI.utils.isWebGLSupported()) { type = "canvas"; } PIXI.utils.sayHello(type); 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 分辨率 }); document.getElementById("demo_stage").appendChild(app.view); </script> </body> </html>此时，浏览器访问页面会看到页面创建了一个宽750像素，高1448像素的黑色canvas标签，该标签的父元素就是id为demo_stage的div元素。浏览器显示如下：
- 我们可以看到黑色canvas周围有空白区域，那是因为body标签有默认的margin值，设置样式取消即可：
在 index.html 的head标签中插入样式：
<style>
body {
margin: 0;
}
</style>此时浏览器显示如下：
- 设置overflow: hidden;隐藏滚动条
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
到此应用创建完毕！
上面是将应用插入到div元素中，如果直接使用canvas元素呢？
- 修改 index.html 文件，将div改成canvas
<!-- <div id="demo_stage"></div> -->
<canvas id="demo_stage"></canvas>- 新增Pixi应用参数
view: document.getElementById("demo_stage")- 注释下面代码：
// document.getElementById("demo_stage").appendChild(app.view);index.html 文件完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>pixi-demo</title>
<style>
body {
margin: 0;
overflow: hidden;
}
</style>
</head>
<body>
<!-- <div id="demo_stage"></div> -->
<canvas id="demo_stage"></canvas>
<!-- 引入pixi -->
<script src="js/pixi.min.js"></script>
<script type="text/javascript">
// 判断当前浏览器是否支持WebGL，支持则使用WebGL渲染，反之使用canvas渲染
let type = "WebGL";
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas";
}
PIXI.utils.sayHello(type);
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 分辨率
view: document.getElementById("demo_stage"),
});
// document.getElementById("demo_stage").appendChild(app.view);
</script>
</body>
</html>
此时浏览器显示如下：
总结
PixiJS创建应用的两种方式：
方式一：使用div元素包裹应用
需要将应用插入div元素中，无需设置view属性；方式二：直接使用canvas
设置view属性为canvas元素即可
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。