在寫這個主題前，我先問了自己

讓網頁上能看到畫面、動態的方式很多，為什麼會特別選擇PixiJS?

各種表現視覺與動態的做法各有其特性：

靜態圖：
沒有瀏覽器限制，但就是不會動。
可以隨螢幕放大，但是無法調整位置。

Gif：
特性與靜態圖類似，但有檔案較大的問題。

影片：
會動，但手機版瀏覽器預設不會播放，
在不同系統裡，影片播放的行為也不相同。

SVG：
效能與瀏覽器支援性與WebGL為底的 PixiJS 不同，
適合的用途也不同。
如果需求是作表格，我還是會建議 D3.js，
(除了D3.js 擅長分析資料外，D3.js 的 DOM 結構也方便處錯)

three.js：
特性與 PixiJS 類似，由於是3維空間、也另有光源與材質可控制。
學習與使用上會比 PixiJS 複雜，視使用需求而定。

HTML 與 CSS：
實際上並不會直接拿來比較，
PixiJS 運用的是 canvas，上頭可以再加上不同的 DOM 元件，
視不同的使用情境，也不一定整個頁面都使用1組 PixiJS 來完成。

PixiJS
使用 WebGL 在 canvas 上繪製內容與製作動態，
支援多點觸控、遮罩與混合模式、可外加 WebGL 濾等。
但缺點同時也是不支援太過老舊的瀏覽器。

因此，使用 PixiJS 也是一種選擇，有其方便與不便的情形。

這是一個我用 PixiJS 做的動態轉錄成的gif，
這個動態用到了遮罩、父元件與子元件動態
(後續會有這個動態的說明文章)

若覺得這樣的前言還不錯，
那就繼續閱讀後續的文章吧！

系列文章分作三個部分:
第一部分：介紹 PixiJS
由於 PixiJS 也許對不少人來說有點陌生
會花一些篇幅在講 PixiJS 是什麼、特色、使用 PixiJS 的專案與官方相關資源等
以及會有一篇提到我做過的例子，用來銜接第二部分的 PixiJS 功能介紹

第二部分：PixiJS 功能與方法說明
介紹 PixiJS 套件的各種方法、實作與注意事項
如何應用在專案上、專案如何向下相容等

第三部分：PixiJS 實作
從我自身做過的例子來說明 PixiJS 一些效果的實作方式