Skip to content
SignalRGB

Upoznajte Canvas

Naš engine renderuje efekte u realnom vremenu koristeći HTML canvas element, slično kao što pregledač prikazuje veb-stranice koje posetite.

Prilagođeni efekti moraju biti sačuvani u određenom folderu na računaru kako bismo ih mogli pronaći. Bez obzira na IDE koji izaberete, svaki efekat je jedna HTML datoteka koja se nalazi u C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ tokom razvoja, prikazana je u meniju “Installed”, za svaku novu datoteku postavljenu u taj folder, SignalRGB mora biti ponovo pokrenut.

<canvas> mora biti kreiran u vašem <body> elementu i zatim ispravno preuzet u <script> (predstavljeno u ovom primeru sa var ctx). Metode koje su priložene na ctx poput fillStyle, fillRect itd. mogu se zatim koristiti za kreiranje željenih animacija. Sledi jednostavan primer ciklusa nijanse.

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

Rezultat

Section titled “Rezultat”

I tu ga imamo, jedan veoma impresivan ciklus nijanse. Možda je osnovan, ali ovaj mali predložak sadrži sve što vam treba za početak kodiranja! Za više detalja, pogledajte Efekti su veb-stranice.