Przejdź do głównej zawartości
SignalRGB

Poznaj canvas

Nasz silnik renderuje efekty w czasie rzeczywistym za pomocą elementu HTML canvas, podobnie do tego, jak przeglądarka renderuje odwiedzane przez ciebie strony internetowe.

Niestandardowe efekty muszą być zapisane w określonym folderze na twoim komputerze, abyśmy mogli je znaleźć. Niezależnie od wybranego IDE, każdy efekt to pojedynczy plik HTML, który podczas tworzenia powinien znajdować się w C:\Users\<nazwa_użytkownika>\AppData\Local\VortxEngine\app-<wersja>\Signal-x64\Effects\Dynamic\. Są one wyświetlane w menu “Zainstalowane”. Dla każdego nowego pliku umieszczonego w tym folderze SignalRGB musi zostać uruchomiony ponownie.

Element <canvas> musi być utworzony w elemencie <body>, a następnie poprawnie pobrany w <script> (w tym przykładzie reprezentowany przez var ctx). Metody powiązane z ctx, takie jak fillStyle, fillRect itp., mogą być następnie używane do tworzenia pożądanych animacji. Poniżej znajduje się prosty przykład cyklu kolorów.

<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>

Wynik

Dział zatytułowany „Wynik”

I oto mamy to — bardzo imponujący cykl kolorów. Może być podstawowy, ale ten mały szablon zawiera wszystko, czego potrzebujesz, aby zacząć kodować! Więcej szczegółów znajdziesz w artykule Efekty to strony internetowe.