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