İçeriğe geç
SignalRGB

Canvas ile Tanışın

Motorumuz, ziyaret ettiğiniz web sitelerini bir tarayıcının işlediği şekle benzer biçimde HTML canvas öğesini kullanarak efektleri gerçek zamanlı olarak işler.

Özel efektler, onları bulabilmemiz için bilgisayarınızdaki belirli bir klasörde saklanmalıdır. Hangi IDE’yi seçtiğinizden bağımsız olarak, her efekt geliştirme sırasında C:\Users\<kullanıcı adı>\AppData\Local\VortxEngine\app-<sürüm>\Signal-x64\Effects\Dynamic\ dizinine ait tek bir HTML dosyasıdır; “Yüklü” menüsünde gösterilir ve söz konusu klasöre eklenen her yeni dosya için SignalRGB’nin yeniden başlatılması gerekir.

<canvas>, <body> öğenizde oluşturulmalı ve ardından <script> içinde doğru şekilde alınmalıdır (bu örnekte var ctx ile temsil edilmektedir). fillStyle, fillRect vb. gibi ctx’ye bağlı yöntemler daha sonra istenen animasyonları oluşturmak için kullanılabilir. Basit bir renk tonu döngüsü örneği aşağıda verilmiştir.

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

Sonuç

Section titled “Sonuç”

İşte bu kadar, çok etkileyici bir renk tonu döngüsü. Temel görünebilir ancak bu küçük şablon, kodlamaya başlamak için ihtiyacınız olan her şeyi içermektedir! Daha fazla ayrıntı için Efektler Web Sayfalarıdır bölümüne göz atın.