Ga naar inhoud
SignalRGB

Maak kennis met het canvas

Onze engine rendert effecten in realtime met behulp van het HTML-canvaselement, vergelijkbaar met hoe een browser websites weergeeft.

Aangepaste effecten moeten worden opgeslagen in een specifieke map op uw computer zodat we ze kunnen vinden. Ongeacht welke IDE u kiest, elk effect is een enkel HTML-bestand dat hoort in C:\Users\<gebruikersnaam>\AppData\Local\VortxEngine\app-<versie>\Signal-x64\Effects\Dynamic\ tijdens de ontwikkeling. Ze worden weergegeven in het menu “Installed”; voor elk nieuw bestand dat in die map wordt geplaatst, moet SignalRGB worden herstart.

Het <canvas> moet worden aangemaakt in uw <body>-element en vervolgens correct worden opgehaald in de <script> (in dit voorbeeld weergegeven door var ctx). Methoden die zijn gekoppeld aan ctx, zoals fillStyle, fillRect, enz., kunnen vervolgens worden gebruikt om de gewenste animaties te maken. Een eenvoudig tinkcyclus-voorbeeld volgt.

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

Het resultaat

Section titled “Het resultaat”

En dat is het: een zeer indrukwekkende tinkcyclus. Het mag dan basaal zijn, maar dit kleine sjabloon bevat alles wat u nodig heeft om te beginnen met coderen! Voor meer details, bekijk Effecten zijn webpagina’s.