特效即是網頁

SignalRGB 中的特效，也就是 Lightscripts， 本質上是與 SignalRGB API 互動的網頁，並且必須遵守一些簡單的規則才能正常運作。每個 Lightscript 都需要三個基本的 HTML 標籤：<head>、<body> 和 <script>。

<head>

此區段應包含所有必要的 <meta> 標籤。如「API 參考」章節中所述，這些標籤可以建立使用者輸入欄位（如色相滑桿、數字選擇器等），或存取 SignalRGB API 以從您的主要應用程式提取視覺輸入。此外，此區段中的 <title> 標籤會在 SignalRGB 應用程式中為您的特效指定標籤名稱。

讓我們重新檢視之前的範例以便更清楚地理解：

<head>
    <title>Hue Cycle</title>
    <meta description="Stock hue cycle."/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>

此標頭包含四個標籤：一個 <title> 標籤，以及三個 <meta> 標籤，涵蓋說明、發布者和一個基本數字滑桿。雖然靜態特效標頭通常很小，但響應螢幕上動作的特效可能會涉及數十個儀錶，每個儀錶具有多個解析度設定。保持整潔並遵循良好的命名慣例非常重要。

<head>

<body>

body 只包含一個元素 — <canvas> 標籤。此標籤的基本屬性是 id（用於在腳本中取得 canvas），以及 width 和 height。SignalRGB 的標準尺寸是寬度 320px、高度 200px。

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

此標籤是魔法發生的地方。此腳本中有三個基本區段，以及 Lightscript 開發者應視為標準的兩個函式：update 和 window.requestAnimationFrame。

變數宣告

所有腳本範圍的變數都應一起宣告，以簡化您的開發流程。未來這也將包含儀錶宣告，但目前我們有一個簡單的選擇。

var c： 用於從 DOM 中取得 canvas 標籤。
var ctx： canvas 元素的 2D 上下文，這是您特效的可編輯區域。
height、width 和 hue：在此宣告以簡化流程。

初始更新呼叫

在程式碼區塊底部，我引用了 window.requestAnimationFrame(update)。「update」是處理動畫細節的函式名稱。每個影格中的更新狀態為觀看者創造了動態的錯覺。

這裡使用的方法至關重要：由於 update 函式中的每個操作都需要少量時間執行，直接呼叫 update() 可能會導致動畫延遲。例如，第一個回呼可能認為已過了 100ms，下一個 110ms，依此類推。

透過使用 window.requestAnimationFrame，當前時間戳會傳遞給回呼函式及其巢狀回呼，儘管有小的執行間隔，仍能保持動畫狀態。

簡而言之，使用 window.requestAnimationFrame(callback) 方法來更新您的動畫！

update 函式

此函式是可運作的 Lightscript 的核心，由於它每個影格都會執行，因此需要盡可能簡單且流暢。在初始腳本載入和函式呼叫之後，update 將透過其內部的 window.requestAnimationFrame 呼叫持續執行。

在此範例中，每個影格執行四個主要操作：

使用 ctx.fillStyle 設定 canvas 填充樣式。這可以是顏色、圖案或漸層，並會保持有效直到被下一個 ctx.fillStyle 呼叫覆寫。
使用 ctx.fillRect(x, y, width, height) 建立一個矩形（使用先前設定的填充樣式）。在此案例中，矩形代表整個 canvas。
將 hue 以 speed（標頭中的使用者輸入變數）遞增。
將 hue 限制在 0-360 範圍內以符合 HSL（色相、飽和度、亮度） 標準。

<script>
    // 變數宣告 -------------------------
    // 從 DOM 取得 canvas 元素
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;

    // update 函式 --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // 重新呼叫函式
      window.requestAnimationFrame(update);
    }

    // 初始更新呼叫 ----------------------------
    window.requestAnimationFrame(update);
</script>

這個一般模式**（設定填充、繪製形狀、編輯變數）**是 canvas 動畫的標準做法。

如果顏色不正確，您遺漏了樣式填充。
如果形狀不正確，您遺漏了形狀填充。
如果隨時間沒有任何變化，您沒有編輯變數。

有關更多詳細資訊和疑難排解建議，請查看我們的下一頁 HTML5 + JS。

<script>