SVG 路徑

如果您想為 Lightscript 增添一些色彩，添加背景是一個引人注目的方式。有幾種不同的方法可以實現這一點，但目前為止最簡單且最有效率的是使用 SVG 路徑。

SVG 路徑可以使用 Adobe Illustrator 相對輕鬆地建立。最好從您希望簡化為 SVG 路徑的普通 PNG 圖片開始。找到背景圖片後，點擊新建並選擇 Web Large 預設以建立新的 Illustrator 專案。

接下來，點擊工具列中的檔案 -> 置入，然後在彈出的視窗中選擇您的圖片，將參考圖片導入新的工作區。

通常，工作區會比導入的圖片大得多。要解決這個問題，請點擊物件 -> 工作區 -> 符合圖稿邊界選項。

接下來，選擇您想要隔離成路徑的圖片部分。SVG 圖片由其輪廓路徑定義的多邊形組成。然後可以使用 JS Canvas API 用顏色或漸層填充這些多邊形。

在此範例中，我將描繪池塘的輪廓並用純色填充它。要開始，請按鍵盤上的 P 選擇鋼筆工具。沿著您想要描繪的形狀輪廓點擊一個點，然後繼續添加更多點，直到您製作出與您選擇的形狀形狀和大小相同的連續路徑。此形狀的顏色無關緊要，因為您將在 JavaScript 程式碼中單獨設定顏色。

對您的路徑滿意後，點擊檔案 -> 匯出 -> 匯出為來匯出它。確保選擇 SVG 檔案類型。

在打開的下一個視窗中，確保影像設定為連結，然後點擊顯示程式碼選項。

在打開的記事本視窗中，找到 <polygon> 標籤並複製 points 屬性的全部內容。這應該是一長串數字。接下來，點擊取消，因為您現在擁有所需的所有資料。

要在特效 canvas 上繪製基於路徑的圖片，請宣告兩個新常數。首先，宣告一個設定為您之前複製的字串的常數。

現在，使用 new Path2D(path) 建立一個新路徑，其中 path 是您第一個常數的名稱。

現在可以透過呼叫 ctx.fill(path2d) 繪製此圖片，其中 path2d 是您在上一步中宣告的路徑的名稱。

要設定形狀的顏色，請在繪製圖片之前呼叫 ctx.fillStyle(color)。此函式接受十六進位顏色代碼、CSS 顏色名稱、CSS 顏色函式和漸層作為參數。

您還可以使用完整的 canvas 變換特效陣列，如縮放和平移。為了確保變換只應用於當前圖片，請在每一層繪製後使用 ctx.setTransform(1,0,0,1,0,0)。

以下範例程式碼展示如何繪製簡單的 SVG 路徑圖片。此技術可以根據需要重複多次以繪製複雜的背景。

var c = document.getElementById("exCanvas");
var ctx = c.getContext("2d");

// 從 Illustrator 複製的資料。確保第一個字元是 M。
const pondData = "M351 396.5 440 435.5 501.84 435.5 539.37 435.5 584.5 415.5 581.5 396.5 570 385.5 581.5 383.13 546 370.5 502 365.5 480.5 384.66 457.42 365.5 443.63 365.5 432.14 365.5 413 380.5 408 390.5 371 387.5 351 396.5";
// 從資料建立新的 Path2D。
const pondPath = new Path2D(pondData);

function update() {

  ctx.scale(0.3,0.3); // 選用的 canvas 變換。您也可以使用 ctx.translate(x,y) 移動新路徑的位置。
  ctx.fillStyle = "blue"; // 設定路徑的顏色。您也可以在這裡使用漸層。
  ctx.fill(pondPath); // 繪製路徑。
  ctx.setTransform(1, 0, 0, 1, 0, 0); // 重設變換，使其只影響此路徑。

  window.requestAnimationFrame(update);
}

window.requestAnimationFrame(update);

上面的程式碼應該產生以下結果：