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);
結尾
一些基本的用法。
