Hoppa till innehåll
SignalRGB

Möt Canvas

Vår motor renderar effekter i realtid med hjälp av html canvas-elementet, på liknande sätt som en webbläsare renderar webbplatser du besöker.

Anpassade effekter måste lagras i en specifik mapp på datorn så att vi kan hitta dem. Oavsett vilken IDE du väljer är varje effekt en enda HTML-fil som tillhör C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ under utveckling. De visas under menyn “Installerade”. För varje ny fil som läggs i den mappen måste SignalRGB startas om.

<canvas>-elementet måste skapas i ditt <body>-element och sedan hämtas korrekt i <script> (representerat i det här exemplet av var ctx). Metoder kopplade till ctx som fillStyle, fillRect osv. kan sedan användas för att skapa önskade animationer. Ett enkelt hue-cykel-exempel följer.

<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>
    // Hämta canvas-elementet från 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>
    // Hämta canvas-elementet från 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>

Resultatet

Section titled “Resultatet”

Och där har vi det – en mycket imponerande hue-cykel. Det kan vara grundläggande, men den här lilla mallen innehåller allt du behöver för att börja koda! För mer detaljer, kolla in Effekter är webbsidor.