大家好，我是前端西瓜哥。
pixijs 是一個(gè)強(qiáng)大的 Web Canvas 2D 庫(kù)，以其強(qiáng)大性能而著稱。其底層使用了 WebGL 實(shí)現(xiàn)了硬件加速，當(dāng)然如果不支持的話，也能回退為 Canvas。
本文使用的 pixijs 版本為 7.1.2。
Application
Application 代表一個(gè) pixijs 應(yīng)用，對(duì)應(yīng)一個(gè) Canvas。
創(chuàng)建一個(gè) Application 實(shí)例：
const app = new PIXI.Application({ width: 640, height: 360 });支持的構(gòu)造參數(shù)很多，這里列舉一些常用選項(xiàng)：
- width / height：設(shè)置 Canvas 的寬高。
- background：背景色，可以是數(shù)字或字符串，默認(rèn)為 0x000000，即黑色。
- view：指定要應(yīng)用的 Cavans 元素，可以不提供，pixijs 會(huì)給你創(chuàng)建一個(gè)新的，你將它添加到 body 元素下就好。
- resizeTo：跟隨某個(gè)容器元素的尺寸變化進(jìn)行自適應(yīng)，比如 window。設(shè)置后 width / height 配置項(xiàng)目失效。
更多高階配置看 官方 API 文檔。
這里我沒有提供 view，所以我們要將 pixijs 給我們生成的 Canvas 元素掛到頁(yè)面上：
document.body.appendChild(app.view);
下面我們開始繪制圖形。
Graphics
Graphics 類常用于繪制一些比較基礎(chǔ)的圖形，比如矩形、圓形、線段等。除了繪制圖形，還可以用它來設(shè)置遮罩（mask）或點(diǎn)擊區(qū)域（hitArea）。
在一個(gè) Graphics 下，不只是只能畫一個(gè)圖形，也可以畫多個(gè)圖形。
繪制矩形
繪制紅色填充色的矩形。
const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 設(shè)置填充色
rect.lineStyle(5, 0xFFFFFF); // 設(shè)置描邊線寬和顏色
rect.drawRect(100, 100, 200, 100); // 參數(shù)分別為 x, y, width, height
// 添加到 stage 下
app.stage.addChild(rect);
app.stage 是放置圖形的地方，也就是 “舞臺(tái)”。這里我們要通過 addChild 將創(chuàng)建的圖形加入進(jìn)去，之后 pixijs 的渲染器會(huì)讀取到這個(gè)圖形進(jìn)行繪制。
drawRect 是一種舊的寫法，看起來是直接在畫布上繪制矩形，但其實(shí)底層是創(chuàng)建一個(gè) Rect 對(duì)象添加到圖形樹上，先不繪制，然后在圖形樹準(zhǔn)備好之后的渲染階段，再讀取該對(duì)象的數(shù)據(jù)并且繪制。這和 CanvasRenderingContext2D.fillRect 屬于不同的繪制機(jī)制，后者不會(huì)維護(hù)圖形樹狀態(tài)。
Graphics 本質(zhì)并不是繪制工具，而是構(gòu)建樹的工具，繪制的實(shí)現(xiàn)在其他地方。
另一種寫法，首先創(chuàng)建 PIXI.Rectangle 實(shí)例，這個(gè)實(shí)例只是描述一個(gè)矩形的屬性，本身并不能直接添加到 stage 上，需要通過 Graphics 的 drawShape 添加到 Graphics 上。
const rect = new PIXI.Graphics();
rect.beginFill(0xFF0044); // 設(shè)置填充色
rect.lineStyle(5, 0xFFFFFF); // 設(shè)置描邊線寬和顏色
const s = new PIXI.Rectangle(100, 100, 200, 100);
rect.drawShape(s);
// 記得添加到 stage 下
app.stage.addChild(rect);
繪制圓形
繪制圓形同理：
const circle = new PIXI.Graphics();
circle.beginFill(0x00FF44);
circle.lineStyle(5, 0xFFFFFF);
// 參數(shù)：cx（中點(diǎn)）, cy, radius
circle.drawCircle(100, 100, 50);
app.stage.addChild(circle);
效果：
有種嚴(yán)重的鋸齒感，這是因?yàn)?nbsp;pixijs 默認(rèn)是不開抗鋸齒的，因?yàn)榭逛忼X處理要消耗額外的性能。
可以開啟全局的抗鋸齒能力：
const app = new PIXI.Application({ antialias: true, /* 其他配置項(xiàng) */ });開啟抗鋸齒后的圓形，肉眼可見地圓潤(rùn)了：
繪制圓角矩形
代碼：
const roundedRect = new PIXI.Graphics();
roundedRect.beginFill(0xff0044);
roundedRect.lineStyle(5, 0xffffff);
// 參數(shù)為：x, y, width, height, radius
roundedRect.drawRoundedRect(100, 100, 200, 100, 16);
// 添加到 stage 下
app.stage.addChild(roundedRect);
效果：
繪制橢圓
代碼：
const ellipse = new PIXI.Graphics();
ellipse.beginFill(0xff0044);
ellipse.lineStyle(5, 0xffffff);
// 參數(shù)：cx, cy, width, height
ellipse.drawEllipse(100, 100, 80, 40);
// 添加到 stage 下
app.stage.addChild(ellipse);
效果：
繪制線條
代碼：
const line = new PIXI.Graphics();
line.lineStyle(5, 0xffffff);
line.moveTo(100, 100);
line.lineTo(300, 250);
// 添加到 stage 下
app.stage.addChild(line);
效果：
繪制多邊形
代碼：
const polygon = new PIXI.Graphics();
polygon.beginFill(0xff0044);
polygon.lineStyle(5, 0xffffff);
// x1, y1, x2, y2, ...
polygon.drawPolygon(100, 100, 300, 250, 350, 50);
// 添加到 stage 下
app.stage.addChild(polygon);
效果：
繪制三階貝塞爾曲線
代碼：
const curve = new PIXI.Graphics();
curve.beginFill(0xff0044);
curve.lineStyle(5, 0xffffff);
curve.moveTo(100, 180)
// cpX, cpY, cpX2, cpY2, toX, toY
curve.bezierCurveTo(90, 100, 210, 100, 300, 180)
// 添加到 stage 下
app.stage.addChild(curve);
效果：
結(jié)尾
本文主要講了 pixijs 中一些基礎(chǔ)圖形的繪制寫法。
