跳转到内容
SignalRGB

颜色循环

本教程将探索”认识 Canvas”示例中颜色循环的一些变体。它包括动画说明和一些基本的用户控件。

基本颜色循环

Section titled “基本颜色循环”

此效果由一个填充整个 canvas 并随时间改变颜色的矩形组成。用户可以编辑颜色转换的速度。

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
  <!-- 1. Create numeric slider to edit the animation speed -->
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
</head>


<body style="margin: 0; padding: 0;">
  <!-- 2. Create the canvas element inside of the body tag -->
    <canvas id="exCanvas" width="320" height="200"></canvas>
</body>


<script>
    // 3. Get the canvas element from the DOM
    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    // 4. Declare script variables
    var width = 320;
    var height = 200;
    var hue = 0;


    // 5. Write update function to render each frame
    function update() {
    // 6. Set fillstyle, hue is variable over time
      ctx.fillStyle = 'hsl('+ hue + ', 100%, 50%)';
    // 7. Use the fillRect method to create the path and draw in the same command
      ctx.fillRect(0, 0, width , height);
    // 8. Iterate the hue by the speed set by the user. Small adjustment made for better user slider.
      hue+=(speed / 4);
    // 9. Limit hue to the 0-360 range for use with hsl
      if (hue > 360) { hue = hue % 360; }
    // 10. Re-call the update function at the end of every update
      window.requestAnimationFrame(update);
    }


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

结果是丰富多彩的，但很基础。我们可以在 canvas 上做更多！

渐变颜色循环

Section titled “渐变颜色循环”

在这里，我用随时间变化的渐变替换了单一颜色。用户可以编辑颜色转换的速度以及每个渐变点之间的距离。

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
  <!-- 1. Create numeric slider to edit the color width of the gradient -->
    <meta property="distance" label="Color Distance" type="number" min="1" max="160" default="50">
</head>


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


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;


    // 2. Initial hue is set to 0
    var hue1 = 0;


    function update() {


      // 3. Create two more colors for use with the gradient by adding the user's color width.
      hue1+=(speed / 4);
      hue2 = hue1 + distance;
      hue3 = hue2 + distance;
      // 4. Limit each individual hue to the 0-360 range
      if (hue1 > 360) { hue1 = hue1 % 360; }
      if (hue2 > 360) { hue2 = hue2 % 360; }
      if (hue3 > 360) { hue3 = hue3 % 360; }


      // 5. Create a linear gradient.
      var grd = ctx.createLinearGradient(0, 0, width, 0);
      //6. Set gradient color stops with the hues.
      grd.addColorStop(0, `hsl(${hue1}, 100%, 50%)`);
      grd.addColorStop(.5, `hsl(${hue2}, 100%, 50%)`);
      grd.addColorStop(1, `hsl(${hue3}, 100%, 50%)`);


      // 7. Set fillstyle and draw rectangle
      ctx.fillStyle = grd;
      ctx.fillRect(0, 0, width , height);




      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

像素化颜色循环

Section titled “像素化颜色循环”

这个变得有点复杂，请耐心理解数学部分。我们最后的颜色循环是像素化的蛇形颜色爬行。

<head>
    <title>Generic</title>
    <meta description="Template"/>
    <meta publisher="WhirlwindFX" />
    <meta property="speed" label="Cycle Speed" type="number" min="1" max="10" default="2">
    <meta property="distance" label="Color Distance" type="number" min="1" max="10" default="2">
  <!-- 1. Create numeric slider to edit the pixel density of the cycle -->
    <meta property="density" label="Pixel Density" type="number" min="0" max="2" default="1">
</head>


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


<script>


    var c = document.getElementById("exCanvas");
    var ctx = c.getContext("2d");


    var width = 320;
    var height = 200;
    var hue = 0;


    function update() {


      // 2. Draw a white background to overwrite previous frames
      ctx.fillStyle = "white"
      ctx.fillRect(0, 0, width, height)


      hue += (speed/4);
      if(hue > 360) {
        hue = hue % 360;
      }


      // 3. Calculate the square size from user input.
      var size = 10 * Math.pow(2, density);
      // 4. Calculate the total number of squares.
      var goal = 64000 / (size * size);


      // 5. While loop will run until we hit the specified number of squares
      var i = 0;
      while(i < goal){
        // 6. Calculate row and column multiplyer
        var iRow = Math.floor(i / (width / size));
        var iCol = i % (width / size);
        // 7. Calculate (x ,y) for each square
        var ix = iCol * size;
        var iy = iRow * size;
        // 8. Calculate the variable color of each square based on user input.
        var iHue = hue + (i * distance);
        if(iHue > 360){
          iHue = iHue % 360;
        }


        // 9. If the iRow calculation is odd, flip the horizontal draw direction.
        if(iRow % 2 != 0){
          ix = (width - size) - iCol * size;
        }


        ctx.beginPath();
        ctx.rect(ix, iy, size, size);


        ctx.fillStyle = `hsl(${iHue}, 100%, 50%)`;
        ctx.fill();
        i++;
      }


      window.requestAnimationFrame(update);
    }


    window.requestAnimationFrame(update);


</script>

希望您在颜色循环上玩得开心！对于涉及基于类的行为和一些基本物理的教程，请查阅 Ball Class 页面。