Skip to content
SignalRGB

Kenali Kanvas

Enjin kami memaparkan kesan dalam masa nyata menggunakan elemen kanvas html, serupa dengan cara pelayar memaparkan laman web yang Anda lawati.

Kesan tersuai mesti disimpan dalam folder tertentu di komputer Anda supaya kami boleh mencarinya. Tanpa mengira IDE yang Anda pilih, setiap kesan adalah satu fail HTML yang terletak di C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ semasa dalam pembangunan, ia ditunjukkan dalam menu “Dipasang”, untuk setiap fail baru yang diletakkan dalam folder tersebut, SignalRGB perlu dimulakan semula.

<canvas> mesti dibuat dalam elemen <body> Anda dan kemudian diambil dengan betul dalam <script> (diwakili dalam contoh ini oleh var ctx). Kaedah yang dilampirkan pada ctx seperti fillStyle, fillRect, dll. kemudian boleh digunakan untuk membuat animasi yang diinginkan. Contoh kitaran hue yang mudah berikut.

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

Hasilnya

Section titled “Hasilnya”

Dan itulah, kitaran hue yang sangat mengagumkan. Mungkin asas, tetapi templat kecil ini mengandungi semua yang Anda perlukan untuk mula mengekod! Untuk maklumat lebih terperinci, lihat Kesan Adalah Laman Web.