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