跳到內容
SignalRGB

認識 Canvas

我們的引擎使用 HTML canvas 元素即時渲染特效，類似於瀏覽器渲染您訪問的網站的方式。

自訂特效必須儲存在電腦上的特定資料夾中，這樣我們才能找到它們。無論您選擇哪種 IDE，每個特效都是一個 HTML 檔案，應放在 C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ 中。在開發期間，它們會顯示在「已安裝」選單中。每次在該資料夾中放入新檔案，SignalRGB 都需要重新啟動。

<canvas> 必須在您的 <body> 元素中建立，然後在 <script> 中正確取得（在此例中由 var ctx 表示）。然後可以使用附加到 ctx 的方法（如 fillStyle、fillRect 等）來建立所需的動畫。以下是一個簡單的色相循環範例。

<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>
<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>
<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;


    function update()
    {
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      ctx.fillRect(0, 0, width , height);
      hue+=(speed / 4);
      if (hue > 360) { hue = hue % 360; }
      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);
</script>
<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>


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


<script>
    // Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");
    var width = 320;
    var height = 200;
    var hue = 0;


    function update()
    {
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      ctx.fillRect(0, 0, width , height);
      hue+=(speed / 4);
      if (hue > 360) { hue = hue % 360; }
      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);
</script>

結果

Section titled “結果”

就是這樣，一個非常令人印象深刻的色相循環特效。它可能很基礎，但這個小模板包含了您開始編碼所需的一切！如需更多詳細資訊，請查看特效是網頁。