回顾
前面成功引入了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 完整代码如下:
pixi-demo 此时,浏览器访问页面会看到页面创建了一个宽750像素,高1448像素的黑色canvas标签,该标签的父元素就是id为demo_stage的div元素。浏览器显示如下:
- 我们可以看到黑色canvas周围有空白区域,那是因为body标签有默认的margin值,设置样式取消即可:
在 index.html 的head标签中插入样式:
- 设置overflow: hidden;隐藏滚动条
到此应用创建完毕!
上面是将应用插入到div元素中,如果直接使用canvas元素呢?
- 修改 index.html 文件,将div改成canvas
- 新增Pixi应用参数
view: document.getElementById("demo_stage")
- 注释下面代码:
// document.getElementById("demo_stage").appendChild(app.view);
index.html 文件完整代码如下:
pixi-demo
总结
PixiJS创建应用的两种方式:
方式一:使用div元素包裹应用
需要将应用插入div元素中,无需设置view属性;
方式二:直接使用canvas
设置view属性为canvas元素即可