Zum Inhalt springen
SignalRGB

Lerne den Canvas kennen

Unsere Engine rendert Effekte in Echtzeit mit dem HTML-canvas-Element, ähnlich wie ein Browser die Websites rendert, die du besuchst.

Benutzerdefinierte Effekte müssen in einem bestimmten Ordner auf deinem Computer gespeichert werden, damit wir sie finden können. Unabhängig davon, welche IDE du wählst, ist jeder Effekt eine einzelne HTML-Datei, die während der Entwicklung in C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ gehört und im “Installiert”-Menü angezeigt wird. Für jede neue Datei, die in diesen Ordner gelegt wird, muss SignalRGB neugestartet werden.

Das <canvas> muss in deinem <body>-Element erstellt und dann korrekt im <script> abgerufen werden (in diesem Beispiel durch var ctx dargestellt). Methoden, die an ctx angehängt sind, wie fillStyle, fillRect usw., können dann verwendet werden, um die gewünschten Animationen zu erstellen. Ein einfaches Farbton-Zyklus-Beispiel folgt.

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

Das Ergebnis

Abschnitt betitelt „Das Ergebnis“

Und da haben wir es, einen sehr beeindruckenden Farbton-Zyklus. Er mag grundlegend sein, aber diese kleine Vorlage enthält alles, was du zum Starten des Kodierens brauchst! Für mehr Details, schau dir Effekte sind Webseiten an.