回顾
后面胜利引入了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元素即可