Aller au contenu
SignalRGB

Découvrir le Canvas

Notre moteur rend les effets en temps réel en utilisant l’élément canvas HTML, de façon similaire à la manière dont un navigateur rend les sites web que vous visitez.

Les effets personnalisés doivent être stockés dans un dossier spécifique de votre ordinateur pour que nous puissions les trouver. Quel que soit l’IDE que vous choisissez, chaque effet est un seul fichier HTML qui appartient à C:\Users\<username>\AppData\Local\VortxEngine\app-<version>\Signal-x64\Effects\Dynamic\ en cours de développement ; ils sont affichés dans le menu “Installé”. Pour chaque nouveau fichier ajouté dans ce dossier, SignalRGB doit être redémarré.

Le <canvas> doit être créé dans votre élément <body> puis correctement récupéré dans le <script> (représenté dans cet exemple par var ctx). Les méthodes attachées à ctx comme fillStyle, fillRect, etc. peuvent ensuite être utilisées pour créer les animations désirées. Un exemple simple de cycle de teinte suit.

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

Le Résultat

Section intitulée « Le Résultat »

Et voilà, un cycle de teinte très impressionnant. C’est peut-être basique, mais ce petit modèle contient tout ce dont vous avez besoin pour commencer à coder ! Pour plus de détails, consultez Les Effets sont des Pages Web.