你知道吗？从未见过一个强者，拥有一个简单的过往，解决不了的问题那就交给时间吧。努力是一个缓慢积累的过程，如果耐不住性子，沉不住气，获得的只能是焦虑，而非想要的结果。平心静气，韬光养晦，才能以图来日。

前言

上一篇文章PixiJS (一)、PixiJS 是什么？能做什么？不能做什么？🔥🔥 我们已经详细的介绍了PixiJS，本文开始安装和使用，直接进入主题吧。

你好 PixiJS

下面就先写一个简易的 PixiJS 的小例子🌰 ，咱们先了解一下，否则都第二篇文章了，小伙伴们还不知道 PixiJS 的例子长啥样。那么编写一个 PixiJS 应用程序需要哪几个步骤呢？

创建一个HTML文件

PixiJS 是一个运行在网页上的 JavaScript 库，所以首先需要一个HTML文件。PixiJS 可以渲染到很复杂的应用程序中，但是这里咱们只是写一个简单的例子，所以又一个空白的 HTML 文件就行


<!DOCTYPE html>
<html lang="en">
  <head>
    <title>PixiJs</title>
  </head>
  <body>
    <h1> Hello PixiJS</h1>
  </body>
</html>

加载PixiJS库

在我们有了一个空白页面以后，而我们需要创建一个 PixiJs 应用，需要先加载 PixiJs 库。这里咱们先引入一个官网的CDN。


<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <h1> Hello PixiJS</h1>
  </body>
</html>

创建应用程序

接下来就是启动 PixiJS，首先用一个脚本标记代替行 < h1 > Hello PixiJS


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <h1> Hello PixiJS</h1>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
    </script>
  </body>
</html>

JavaScript标签中其实就是创建了一个新的 PIXI.Application 实例，那 PIXI.Application 是什么呢？Pixi的介绍是：

方便创建一个 new PIXI.Application 类这个类会自动创建渲染器, ticker 和 root 容器

详细介绍：PIXI.Application

将生成的视图添加到DOM中

创建完 PIXI.Application 类以后，他会以画布元素的形式呈现出来。接下来需要将这个 Canvas 元素添加到 web 页面的 DOM 中。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <h1> Hello PixiJS</h1>
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
    </script>
  </body>
</html>

将文本添加到舞台

把 ”Hello PixiJS“ 用一个PIXI的文本对象创建出来，加入样式最后添加在画布上。


<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <!-- <h1> Hello PixiJS</h1> -->
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      // 创建一个文本样式
      const skewStyle = new PIXI.TextStyle({
        fontFamily: 'Arial',
        dropShadow: true,
        dropShadowAlpha: 0.8,
        dropShadowAngle: 2.1,
        dropShadowBlur: 4,
        dropShadowColor: '0x111111',
        dropShadowDistance: 10,
        fill: ['#ffffff'],
        stroke: '#004620',
        fontSize: 60,
        fontWeight: 'lighter',
        lineJoin: 'round',
        strokeThickness: 12,
      });
      // 创建一个文本类型
      const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
      // 将文本倾斜
      skewText.skew.set(0.1, -0.1);
      // 定义文本在舞台（app）中的位置
      skewText.x = 10;
      skewText.y = 100;
      // 将文本添加到舞台（app）中
      app.stage.addChild(skewText);
    </script>
  </body>
</html>

详情请查看：
PIXI.Text
PIXI.TextStyle

到此咱们的 Hello PixiJS 就算OK了。下面再尝试添加一下图片👇👇

将图片添加到舞台

下面将补充一下将图片添加到画布并且让它旋转起来。

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://pixijs.download/release/pixi.js"></script>
    <title>PixiJs</title>
  </head>
  <body>
    <!-- <h1> Hello PixiJS</h1> -->
    <script>
      // 创建一个新的 PIXI.Application 实例
      let app = new PIXI.Application({ width: 640, height: 360, backgroundColor: 0x1099bb });
      // 将实例添加到 DOM 中
      document.body.appendChild(app.view);
      
      // 创建一个文本样式
      const skewStyle = new PIXI.TextStyle({
        fontFamily: 'Arial',
        dropShadow: true,
        dropShadowAlpha: 0.8,
        dropShadowAngle: 2.1,
        dropShadowBlur: 4,
        dropShadowColor: '0x111111',
        dropShadowDistance: 10,
        fill: ['#ffffff'],
        stroke: '#004620',
        fontSize: 60,
        fontWeight: 'lighter',
        lineJoin: 'round',
        strokeThickness: 12,
      });
      // 创建一个文本类型
      const skewText = new PIXI.Text('Hello PixiJS', skewStyle);
      // 将文本倾斜
      skewText.skew.set(0.1, -0.1);
      // 定义文本在舞台（app）中的位置
      skewText.x = 10;
      skewText.y = 100;
      // 将文本添加到舞台（app）中
      app.stage.addChild(skewText);


      // 创建一个图像精灵
      const luFei = PIXI.Sprite.from('https://img1.baidu.com/it/u=2082729884,1583333066&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=711');
      // 把精灵的原点设置为图片的中心点
      luFei.anchor.set(0.5);
      // 把精灵缩小0.5倍
      luFei.scale.set(0.5);
      // 把精灵定位在画布的中心
      luFei.x = app.screen.width / 2;
      luFei.y = app.screen.height / 2;
      // 把图像精灵添加到舞台（app）上
      app.stage.addChild(luFei);
      // 为舞台添加一个更新循环的方法
      app.ticker.add(() => {
          // 让图像精灵每次更新旋转0.01度
          luFei.rotation += 0.01;
      });
    </script>
  </body>
</html>

详情请查看：
PIXI.Sprite
PIXI.Ticker

本章完

PixiJS (二)、Hello PixiJS 🔥🔥

前言