Pular para o conteúdo
SignalRGB

Conheça o Canvas

O nosso motor renderiza efeitos em tempo real usando o elemento canvas do HTML, de forma semelhante à que um navegador renderiza os sites que visita.

Os efeitos personalizados precisam de ser armazenados numa pasta específica no seu computador para que os possamos encontrar. Independentemente da IDE que escolher, cada efeito é um único ficheiro HTML que deve ficar em C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ durante o desenvolvimento; aparecem no menu “Installed”. Para cada novo ficheiro colocado nessa pasta, o SignalRGB precisa de ser reiniciado.

O <canvas> precisa de ser criado no seu elemento <body> e depois obtido 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 bastante impressionante. Pode ser básico, mas esse pequeno template contém tudo o que precisa para começar a programar! Para mais detalhes, consulte Efeitos São Páginas Web.