关于前端:PixiJS创建应用

35次阅读

共计 2524 个字符，预计需要花费 7 分钟才能阅读完成。

回顾

后面胜利引入了 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 元素呢？

  1. 批改 index.html 文件，将 div 改成 canvas
<!-- <div id="demo_stage"></div> -->
<canvas id="demo_stage"></canvas>
  1. 新增 Pixi 利用参数 
view: document.getElementById("demo_stage")
  1. 正文上面代码：
// 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 元素即可

正文完
前端
发表至： 前端
2022-07-01
 0
关于前端:react入门坑next篇之antd按需引入
关于前端:创建知识库使您的客户能够体验自助服务
关于前端:Fabricjs-元素被选中时保持原有层级
关于前端:如何优雅的在网吧敲代码