前幾篇提到畫漸層填色，這篇來討論使用漸層線段

畫漸層色塊時使用 canvas2d gradient API 方法，繪製漸層線段原理差不多，但有不同的實作方法：
方法1： 繪製漸層，使用遮罩遮住漸層
方法2： 使用漸層遮罩

[ Demo ] 兩種結果不太相同

用純色線段遮罩遮漸層色塊：

• 被遮物：左方紅色到白色的色塊
• 遮罩：中間方框
• 結果：右方紅色到白色的方框

用漸層色塊遮罩遮純色線段：

• 被遮物：左方紅框
• 遮罩：中間黑色到白色的色塊
• 結果：右方紅色到透明的方框

這裡的漸層遮罩，我使用 0x000000 > 0xffffff 的漸層。
在 PixiJS / WebGL 裡，白色表示有，黑色是無
遮罩是上到下、白到黑，表示上方為有，下方為無。

這段敘述也許有點無感，
相同原理如使用過 Photoshop 遮罩 的話，也許就比較有感了

(被遮物是紅色方框，遮罩為上到下的漸層)

前半補充，一些先前寫過的測試文章：

• PixiJS 裡遮罩與透明度的測試：[PixiJS - Day-09] 遮罩
• WebGL 遮罩原理：[WebGL - Day14] Shadertoy - 加減乘除好吃驚、用 Shader 做遮罩

再來聊一個有趣的部分：

把Texture 填入線段

範例 GRAPHICS - Advanced 裡使用：lineTextureStyle() 方法填入材質線段，特性與上篇提到的 beginTextureFill() 差不多。

Demo 另外提到了 arc() 畫弧形方法、beginHole() 挖洞方法、bezierCurveTo() 畫貝茲曲線的方法。
本篇、本系列不會特別提到

數數兒問題：畫在 Graphic 上的不是 textrue

數數兒1：

問題： 剛剛的 Demo 裡，有幾組 Texture / BaseTexture 快取？
答案： 5組，除了左下純色方塊框框，每次使用 漸層 時，皆會產生快取

Code：

function createGradTexture() {
    const canvas = document.createElement('canvas');
    // 中間為填色的 code
    return PIXI.Texture.from(canvas);
};

const gradTexture1_1 = PIXI.Sprite.from(createGradTexture());
const gradTexture1_2 = PIXI.Sprite.from(createGradTexture());
const gradTexture1_3 = PIXI.Sprite.from(createGradTexture());

// 因為每次都繪製新的 Texture 漸層，即使長相相同，也會每次呼叫的時候，都會存成一組 Texture / BaseTexture 快取

數數兒2：

問題： 官方範例 GRAPHICS - Advanced 裡，有幾組 Texture / BaseTexture 快取？
答案： 1個，僅用來填入的 Texture 一組

Code：

// 先讀入一個 Srite，Sprite 實體存有一個 texture 快取
const sprite = PIXI.Sprite.from('assets/bg_rotate.jpg');

// 各種填入線段材質時，重複使用了同一個 texture
// ...
bezier2.lineTextureStyle(10, sprite.texture);
// ...
arc3.lineTextureStyle(20, sprite.texture);
// ...
beatifulRect.lineTextureStyle(20, sprite.texture);

// 因此最後只有一組 Texture / BaseTexture 快取

兩個數數問題都是問使用漸層材質填入 Graphics實體
差異在使用這個材質時，是每次都用新的材質，或者有重複運用

今天的內容除了填材質，提了稍硬一些的材質重複使用，
是優化 PixiJS 效能、避免頁面當掉滿重要的部分