Gå til indhold
SignalRGB

Lær canvas at kende

Vores engine renderer effekter i realtid ved hjælp af HTML-canvas-elementet, ligesom en browser renderer de hjemmesider du besøger.

Brugerdefinerede effekter skal gemmes i en bestemt mappe på din computer, for at vi kan finde dem. Uanset hvilken IDE du vælger, er hver effekt en enkelt HTML-fil, der under udvikling hører til i C:\Users\<brugernavn>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ og vises i menuen “Installeret”. For hver ny fil der placeres i denne mappe, skal SignalRGB genstartes.

<canvas> skal oprettes i dit <body>-element og derefter hentes korrekt i <script> (repræsenteret ved var ctx i dette eksempel). Metoder tilknyttet ctx, som fillStyle, fillRect osv., kan derefter bruges til at skabe de ønskede animationer. Et enkelt farvetone-cyklus-eksempel følger.

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

Resultatet

Sektion kaldt “Resultatet”

Og der har vi det — en meget imponerende farvetone-cyklus. Den er måske grundlæggende, men denne lille skabelon indeholder alt du behøver for at begynde at kode! Se Effekter er hjemmesider for flere detaljer.