Bỏ qua để đến nội dung
SignalRGB

Làm quen với Canvas

Engine của chúng tôi render các hiệu ứng theo thời gian thực bằng cách sử dụng phần tử HTML canvas, tương tự như cách trình duyệt hiển thị các trang web bạn truy cập.

Các hiệu ứng tùy chỉnh phải được lưu trong một thư mục cụ thể trên máy tính để chúng tôi có thể tìm thấy chúng. Bất kể IDE nào bạn chọn, mỗi hiệu ứng là một tệp HTML duy nhất nằm trong C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ trong quá trình phát triển, được hiển thị trong menu “Installed”, đối với mỗi tệp mới được đặt vào thư mục đó, SignalRGB phải được khởi động lại.

<canvas> phải được tạo trong phần tử <body> của bạn và sau đó được lấy đúng cách trong <script> (được thể hiện trong ví dụ này bằng var ctx). Các phương thức được gắn vào ctx như fillStyle, fillRect, v.v. sau đó có thể được sử dụng để tạo các animation mong muốn. Sau đây là một ví dụ đơn giản về chu kỳ sắc độ.

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

Kết quả

Phần tiêu đề “Kết quả”

Và đây rồi, một chu kỳ sắc độ rất ấn tượng. Có thể là cơ bản, nhưng mẫu nhỏ này chứa mọi thứ bạn cần để bắt đầu viết code! Để biết thêm chi tiết, xem Hiệu ứng là các trang web.