Ga naar inhoud
SignalRGB

Het canvas ontmoeten

Onze engine rendert effecten in realtime met behulp van het HTML canvas-element, vergelijkbaar met de manier waarop een browser websites rendert die u bezoekt.

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 tijdens de ontwikkeling in C:\Users\<gebruikersnaam>\AppData\Local\VortxEngine\app-<versie>\Signal-x64\Effects\Dynamic\ hoort te staan. Ze worden weergegeven in het menu “Geïnstalleerd”. Voor elk nieuw bestand dat in die map wordt geplaatst, moet SignalRGB opnieuw worden gestart.

Het <canvas>-element moet worden aangemaakt in uw <body>-element en vervolgens correct worden opgehaald in het <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 voorbeeld van een kleurcyclus 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 daar hebben we het, een zeer indrukwekkende kleurcyclus. Het is misschien basaal, maar dit kleine sjabloon bevat alles wat u nodig heeft om te beginnen met coderen! Voor meer details, bekijk Effecten zijn webpagina’s.