pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力。如果不支持，会回退到 2D 模式，因为 2D 模式是上层的抽象，所以性能会差一些。
简单入门 pixi.js。
pixi.js 是一个快速、灵活的 2D WebGL 渲染引擎。
该库基于 Canvas 封装，默认优先使用 WebGL 进行二维图形绘制，充分利用 GPU 硬件加速能力。如果不支持，会回退到 2D 模式，因为 2D 模式是上层的抽象，所以性能会差一些。
开始
首先创建一个 Application 实例。
我们使用 PIXI.Application 类创建一个新 PixiJS 应用。
import * as PIXI from "pixi.js";
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
// 绘制内容
// ...
该类可以传入配置对象，比如画布宽高（width / height）、背景色（backgroudColor，默认为黑色）、挂载的 canvas 元素（view，不提供 PixiJS 会创建一个）等。
app.view 可以得到 PixiJS 应用挂载的 Canvas 元素。
绘制图形
绘制图形需要先创建 Graphics 实例，然后调用其下的方法。
一个 Graphics 代表一个图形，当然也可以在单个 Graphics 绘制多个图形。
绘制红色矩形：
const rect = new PIXI.Graphics();
rect.beginFill(0xff0044); // 填充色
rect.lineStyle({ width: 2, color: 0x0000ff }); // 描边
rect.drawRect(10, 10, 100, 50);
rect.endFill();
app.stage.addChild(rect);
app.stage 是图形渲染的根节点，我们创建的 graphics 需要添加到 stage 下，这样才会被渲染出来。
绘制圆形：
const circle = new PIXI.Graphics();
circle.beginFill(0x00ff00);
circle.drawCircle(200, 10, 50);
circle.endFill();
app.stage.addChild(circle);
绘制精灵：
const bunny = PIXI.Sprite.from('examples/assets/bunny.png');
bunny.anchor.set(0.5); // 设置精灵图中心点
bunny.x = app.screen.width / 2; // 将精灵图绘制在画布正中央
bunny.y = app.screen.height / 2;
app.stage.addChild(bunny);绘制曲线不支持 SVG 的那种方便的 指令字符串 写法：
// 不支持
const trackPath = new Path2D("M10 10 h 80 v 80 h -80 Z");
只能用类似原生 Canvas 写法那样，一步步绘制了。个人觉得很繁琐，指令字符串言简意赅多好的抽象。
const path = new PIXI.Graphics();
path.lineStyle({ width: 1, color: 0x0000ff });
path.moveTo(10, 10);
path.lineTo(20, 100);
path.bezierCurveTo(40, 120, 60, 120, 80, 100)
app.stage.addChild(path);
容器 Container
使用容器，可以将多个图形进行组合，然后在其上添加位移、旋转等属性，其下的图形会得到这些效果。
Container 不绘制图形，它组合图形，类似 SVG 的 group 元素。
const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);
结尾
一些基本的用法。
