一、介绍

Pixi 是一个超快的 2D 渲染引擎，它可以用来创建动画或管理交互式图像，从而制作一个游戏或应用。

二、启动项目

1. 下载

这个教程使用的版本是 v4.5.5 版本，你可以在 Pixi v4.5.5 的发布页面下载它，你也可以在 Pixi 的主要发布页面下载其他版本。

2. 创建项目并使用 http-server 启动

创建项目

项目目录
```
images/cat.png
index.html
pixi.js
```
下载图片：

初始代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>PIXI学习</title>
    <script src="./pixi.js"></script>
</head>

<body>
    <script type="text/javascript">
        let type = "WebGL"
        if (!PIXI.utils.isWebGLSupported()) {
            type = "canvas"
        }

        PIXI.utils.sayHello(type)
    </script>
</body>

</html>

如果 Pixi 连接成功，控制台将会出现如下内容：

安装 http-server 并启动

# 安装
npm i -g http-server

# 启动
http-server . -c-1

三、创建 Pixi 应用和舞台

// Create a Pixi Application
let app = new PIXI.Application({width: 256, height: 256})

// Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view)

以上代码，将在文档中创建一个 256px * 256px 的黑色 canvas 标签。其中 new PIXI.Application() 就是创建一个 PIXI 应用，{width: 256, height: 256} 就是舞台对象，这个舞台对象作为参数传入 PIXI 应用中。

拿演唱会打比方，PIXI应用 就相当于演唱会的场地，舞台对象 就相当于场地之上的舞台。将来我们还会创建一些精灵放在舞台上，这些精灵就相当于舞台上的歌手或演员。

1. 关于 PIXI.Application

它会自动算出应该使用 Canvas 还是 WebGL 去渲染图像，它取决于你的浏览器支持哪个；

它接收一个配置（options）对象作为参数：

let app = new PIXI.Application({
    width: 256,         // default: 800，单位是 px
    height: 256,        // default: 600，单位是 px
    antialias: true,    // default: false，使得字体的边界和几何图形更加圆滑
    transparent: false, // default: false，设置 Canvas 透明
    resolution: 1,       // default: 1，设置分辨率和像素密度，一般设置 resolution 为 1，就可以应付大多数工程了
    forceCanvas: true,   // Pixi 的画布对象默认使用 WebGL，forceCanvas 设为 true 则强制使用 Canvas
  }
);

其他设置可以查看文档：PIXI.Application

2. 改变 Canvas 的背景

app.renderer.backgroundColor = 0x061639    // 十六进制颜色

3. 获取 Canvas 的宽高

app.renderer.view.width
app.renderer.view.height

4. 改变 Canvas 的宽高

app.renderer.autoResize = true    // 为了确认宽高格式正确，将 autoResize 设为 true
app.renderer.resize(512, 512)

5. 让 Canvas 占据整个窗口

* { margin: 0; padding: 0 }

app.renderer.view.style.position = "absolute"
app.renderer.view.style.display = "block"    // 这一句也可以不写，因为将元素 position 设置为 absolute 之后，元素的 display 就自动变成了 block
app.renderer.autoResize = true
app.renderer.resize(window.innerWidth, window.innerHeight)

1. 介绍、启动项目、创建 Pixi 应用和舞台