تعرّف على Canvas

يعرض محركنا التأثيرات في الوقت الفعلي باستخدام عنصر canvas في HTML، على غرار الطريقة التي يعرض بها المتصفح المواقع التي تزورها.

يجب تخزين التأثيرات المخصصة في مجلد محدد على جهاز الكمبيوتر الخاص بك حتى نتمكن من العثور عليها. وبغض النظر عن بيئة التطوير (IDE) التي تختارها، فإن كل تأثير هو ملف HTML واحد يوضع في C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ أثناء التطوير، وتظهر التأثيرات في قائمة “المثبتة”، ولكل ملف جديد يوضع في هذا المجلد، يجب إعادة تشغيل SignalRGB.

يجب إنشاء <canvas> داخل عنصر <body> ثم جلبه بشكل صحيح في <script> (ممثَّلًا في هذا المثال بـ var ctx). بعد ذلك يمكن استخدام الطرق المرتبطة بـ ctx مثل fillStyle وfillRect وغيرها لإنشاء الرسوم المتحركة المطلوبة. فيما يلي مثال بسيط على دورة درجات الألوان.

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

النتيجة

وها هي ذي، دورة درجات ألوان مبهرة للغاية. قد تكون بسيطة، لكن هذا القالب الصغير يحتوي على كل ما تحتاجه لبدء البرمجة! لمزيد من التفاصيل، راجع التأثيرات هي صفحات ويب.