pixi.js 是一個(gè)快速、靈活的 2D WebGL 渲染引擎。該庫(kù)基于 Canvas 封裝，默認(rèn)優(yōu)先使用 WebGL 進(jìn)行二維圖形繪制，充分利用 GPU 硬件加速能力。如果不支持，會(huì)回退到 2D 模式，因?yàn)?2D 模式是上層的抽象，所以性能會(huì)差一些。
簡(jiǎn)單入門 pixi.js。
pixi.js 是一個(gè)快速、靈活的 2D WebGL 渲染引擎。
該庫(kù)基于 Canvas 封裝，默認(rèn)優(yōu)先使用 WebGL 進(jìn)行二維圖形繪制，充分利用 GPU 硬件加速能力。如果不支持，會(huì)回退到 2D 模式，因?yàn)?2D 模式是上層的抽象，所以性能會(huì)差一些。
開(kāi)始
首先創(chuàng)建一個(gè) Application 實(shí)例。
我們使用 PIXI.Application 類創(chuàng)建一個(gè)新 PixiJS 應(yīng)用。
import * as PIXI from "pixi.js";
const app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);
// 繪制內(nèi)容
// ...
該類可以傳入配置對(duì)象，比如畫布寬高（width / height）、背景色（backgroudColor，默認(rèn)為黑色）、掛載的 canvas 元素（view，不提供 PixiJS 會(huì)創(chuàng)建一個(gè)）等。
app.view 可以得到 PixiJS 應(yīng)用掛載的 Canvas 元素。
繪制圖形
繪制圖形需要先創(chuàng)建 Graphics 實(shí)例，然后調(diào)用其下的方法。
一個(gè) Graphics 代表一個(gè)圖形，當(dāng)然也可以在單個(gè) Graphics 繪制多個(gè)圖形。
繪制紅色矩形：
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 是圖形渲染的根節(jié)點(diǎn)，我們創(chuàng)建的 graphics 需要添加到 stage 下，這樣才會(huì)被渲染出來(lái)。
繪制圓形：
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); // 設(shè)置精靈圖中心點(diǎn)
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 寫法那樣，一步步繪制了。個(gè)人覺(jué)得很繁瑣，指令字符串言簡(jiǎn)意賅多好的抽象。
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
使用容器，可以將多個(gè)圖形進(jìn)行組合，然后在其上添加位移、旋轉(zhuǎn)等屬性，其下的圖形會(huì)得到這些效果。
Container 不繪制圖形，它組合圖形，類似 SVG 的 group 元素。
const container = new PIXI.Container();
container.x = 80;
container.y = 80;
container.addChild(rect, circle);
app.stage.addChild(container);
結(jié)尾
一些基本的用法。
