Lewati ke konten
SignalRGB

Mengenal Canvas

Engine kami merender efek secara realtime menggunakan elemen canvas HTML, mirip dengan cara browser merender situs web yang Anda kunjungi.

Efek kustom harus disimpan di folder tertentu di komputer Anda agar dapat ditemukan. Terlepas dari IDE yang Anda pilih, setiap efek adalah satu file HTML yang harus ditempatkan di C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ selama pengembangan, efek tersebut ditampilkan di menu “Installed”, untuk setiap file baru yang dimasukkan ke folder tersebut, SignalRGB perlu di-restart.

<canvas> harus dibuat di elemen <body> Anda dan kemudian diambil dengan benar di <script> (direpresentasikan dalam contoh ini oleh var ctx). Metode yang terlampir pada ctx seperti fillStyle, fillRect, dll. kemudian dapat digunakan untuk membuat animasi yang diinginkan. Contoh siklus hue sederhana berikut ini.

<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 hasilnya, siklus hue yang sangat mengesankan. Mungkin terlihat sederhana, tetapi template kecil ini berisi semua yang Anda butuhkan untuk mulai membuat kode! Untuk lebih detail, lihat Efek Adalah Halaman Web.