Pular para o conteúdo
SignalRGB

Conheça o Canvas

Nosso motor renderiza efeitos em tempo real usando o elemento canvas do HTML, de forma parecida com a que um navegador renderiza os sites que você visita.

Efeitos personalizados precisam ser armazenados em uma pasta específica no seu computador para que possamos encontrá-los. Independentemente da IDE que você escolher, cada efeito é um único arquivo HTML que deve ficar em C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ durante o desenvolvimento; eles aparecem no menu “Installed”. Para cada novo arquivo colocado nessa pasta, o SignalRGB precisa ser reiniciado.

O <canvas> precisa ser criado no seu elemento <body> e depois buscado corretamente no <script> (representado neste exemplo por var ctx). Métodos vinculados ao ctx, como fillStyle, fillRect, etc., podem ser usados para criar as animações desejadas. Um exemplo simples de ciclo de matiz segue abaixo.

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

O Resultado

Seção intitulada “O Resultado”

E pronto, temos um ciclo de matiz bem impressionante. Pode ser básico, mas esse pequeno template contém tudo que você precisa para começar a programar! Para mais detalhes, confira Efeitos São Páginas Web.