콘텐츠로 이동
SignalRGB

캔버스 소개

SignalRGB 엔진은 브라우저가 웹사이트를 렌더링하는 방식과 유사하게 HTML 캔버스 요소를 사용하여 효과를 실시간으로 렌더링합니다.

커스텀 효과는 SignalRGB가 찾을 수 있도록 컴퓨터의 특정 폴더에 저장해야 합니다. 사용하는 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>

결과

섹션 제목: “결과”

이것으로 기본적인 색조 순환 효과가 완성되었습니다. 단순하지만 이 작은 템플릿에는 코딩을 시작하는 데 필요한 모든 것이 담겨 있습니다! 자세한 내용은 효과는 웹페이지입니다를 참조하십시오.