效果即网页

SignalRGB 中的效果（称为 Lightscripts）本质上是与 SignalRGB API 交互的网页，它们必须遵守一些简单的规则才能正常运行。每个 Lightscript 都需要三个基本 HTML 标签：<head>、<body> 和 <script>。

<head>

此部分应包含任何必要的 <meta> 标签。如”API 参考”部分所述，这些标签可以创建用户输入字段（如色相滑块、数字选择器等）或访问 SignalRGB API 从您的主应用程序获取视觉输入。此外，此部分中的 <title> 标签将在 Signal 应用中为您的效果分配一个标签。

让我们重新查看之前的示例以获得更清晰的理解：

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

此标头包含四个标签：一个 <title> 标签，以及三个 <meta> 标签，涵盖描述、发布者和基本数字滑块。虽然静态效果标头通常很小，但响应屏幕上操作的效果可能涉及数十个计量器，每个计量器都有多个分辨率设置。保持有序并遵循良好的命名约定非常重要。

<head>

<body>

body 只包含一个元素——<canvas> 标签。此标签的基本属性是 id（用于在脚本中获取 canvas）以及 width 和 height。SignalRGB 的标准尺寸为宽度 320px，高度 200px。

<body style="margin: 0; padding: 0;">
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>

<body>

<script>

此标签是魔法发生的地方。此脚本中有三个基本部分，以及两个 Lightscript 开发者应视为标准的函数：update 和 window.requestAnimationFrame。

变量声明

所有脚本作用域的变量应一起声明以简化您的开发过程。将来，这也将包括计量器声明，但现在我们有一个简单的选择。

var c： 用于从之前获取 canvas 标签。
var ctx： canvas 元素的 2D 上下文，这是您效果的可编辑区域。
height、width 和 hue：这些在此处声明以简化过程。

初始更新调用

在代码块底部，我引用 window.requestAnimationFrame(update)。“Update” 是处理动画细节的函数名称。每帧中更新的状态为查看者创造运动的幻觉。

这里使用的方法至关重要：由于更新函数中的每个操作都需要少量时间来执行，直接调用 update() 可能会导致动画出现延迟。例如，第一个回调可能认为已经过了 100ms，下一个 110ms，依此类推。

通过使用 window.requestAnimationFrame，当前时间戳被传递给回调函数及其嵌套回调，尽管执行存在小间隙，但仍保持动画的状态。

简而言之，使用 window.requestAnimationFrame(callback) 方法更新您的动画！

更新函数

此函数是有效 Lightscript 的核心，需要尽可能简单和精简，因为它每帧都在运行。在初始脚本加载和函数调用之后，update 将通过其内部的 window.requestAnimationFrame 调用继续运行。

在此示例中，每帧执行四个主要操作：

使用 ctx.fillStyle 设置 canvas 填充样式。这可以是颜色、图案或渐变，并将持续到被下一个 ctx.fillStyle 调用覆盖。
使用 ctx.fillRect(x, y, width, height) 创建一个矩形（使用之前设置的填充样式）。在本例中，矩形代表整个 canvas。
将 hue 按 speed（标头中的用户输入变量）进行迭代。
将 hue 绑定到 0-360 范围以符合 **HSL（色相、饱和度、亮度）**标准。

<script>
    // Variable Declarations -------------------------
    // 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;

    // Update function --------------------------------
    function update()
    {
      // 1
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
      // 2
      ctx.fillRect(0, 0, width , height);
      // 3
      hue+=(speed / 4);
      // 4
      if (hue > 360) { hue = hue % 360; }
      // Re-call the function
      window.requestAnimationFrame(update);
    }

    // Initial update call ----------------------------
    window.requestAnimationFrame(update);
</script>

这种通用模式**（设置填充、绘制形状、编辑变量）**是 canvas 动画的标准。

如果颜色错误，您遗漏了样式填充。
如果形状错误，您遗漏了形状填充。
如果没有随时间变化，您没有编辑变量。

有关更多详细信息和故障排查建议，请查阅 HTML5 + JS 的下一页。

<script>