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 ser guardados 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 ser reiniciado.

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

<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 este pequeno template contém tudo o que precisa para começar a programar! Para mais detalhes, consulte Efeitos São Páginas Web.