รู้จักกับ 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 ฯลฯ เพื่อสร้างแอนิเมชันที่ต้องการ ต่อไปนี้เป็นตัวอย่าง hue cycle อย่างง่าย

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

ผลลัพธ์

และนี่คือ hue cycle ที่น่าประทับใจมาก อาจดูเรียบง่าย แต่เทมเพลตเล็ก ๆ นี้มีทุกสิ่งที่คุณต้องใช้เพื่อเริ่มเขียนโค้ด! ดูรายละเอียดเพิ่มเติมได้ที่ เอฟเฟกต์คือหน้าเว็บ