PixiJS创建应用

发布时间:2023-09-04 14:00

回顾

前面成功引入了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元素。浏览器显示如下:
    PixiJS创建应用_第1张图片

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

此时浏览器显示如下:
PixiJS创建应用_第2张图片

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

PixiJS创建应用_第3张图片

到此应用创建完毕!

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

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

  1. 新增Pixi应用参数
view: document.getElementById("demo_stage")
  1. 注释下面代码:
// document.getElementById("demo_stage").appendChild(app.view);

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



  
    
    pixi-demo
    
  
  
    
    

    
    
    
  

此时浏览器显示如下:
PixiJS创建应用_第4张图片

总结

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

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

方式二:直接使用canvas

设置view属性为canvas元素即可

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号