Javascript 动画渐变不显示

Question

我知道这很愚蠢，但我真的不知道为什么它不起作用。我正在寻找像这里这样的动画渐变：https://codepen.io/desandro/pen/BzJkQv。我已经完全复制了所有的行，但它仍然是白色背景。我把所有东西都放在一个 HTML 脚本中，这里是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>home</title>
<!--<link href="home_css.css" rel="stylesheet" type="text/css">-->
<style>
    html, body {
      height: 100%;
    }

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    canvas {
      display: block;
      width: 100%;
      height: 100%;
      transform: scale(2);
    }   
</style>
<script>
window.onload = function () {
    function Pixel(x, y) {
        this.x = x;
        this.y = y;
        this.hue = Math.floor(Math.random() * 360);
        var direction = Math.random() > 0.5 ? -1 : 1;
        this.velocity = (Math.random() * 30 + 20) * 0.01 * direction;
    }
    Pixel.prototype.update = function () {
        this.hue += this.velocity;
    };
    Pixel.prototype.render = function (ctx) {
        var hue = Math.round(this.hue);
        ctx.fillStyle = "hsl(" + hue + ", 100%, 50% )";
        ctx.fillRect(this.x, this.y, 1, 1);
    };
    function animate() {
        pixels.forEach(function (pixel) {
            pixel.update();
            pixel.render(ctx);
        });
        requestAnimationFrame(animate);
    }

    var pixels = [new Pixel(0, 0), new Pixel(1, 0), new Pixel(0, 1), new Pixel(1, 1)];

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    animate();
}
</script>
</head>
<body> 
    <canvas width="2" height="2"></canvas>
    <!--
    <div class="login">
      <h1 id="login_title">Login</h1>
        <form method="post">
          <input type="text" name="u" placeholder="Username" required="required" />
            <input type="password" name="p" placeholder="Password" required="required" />
            <button type="submit" class="btn btn-primary btn-block btn-large">Let me in.</button>
        </form>
    </div>
    -->
</body>
</html>

这正是我当前的代码。请你帮助我好吗？如果您需要更多信息，请随时询问！ :)

Answer 1

<script>...</script> 标签内的脚本在内容之前加载。你需要在 window load 事件中包装 js 逻辑。像这样：

window.onload = function () {
   ...
}

完整代码：

window.onload = function () {
    function Pixel(x, y) {
        this.x = x;
        this.y = y;
        this.hue = Math.floor(Math.random() * 360);
        var direction = Math.random() > 0.5 ? -1 : 1;
        this.velocity = (Math.random() * 30 + 20) * 0.01 * direction;
    }
    Pixel.prototype.update = function () {
        this.hue += this.velocity;
    };
    Pixel.prototype.render = function (ctx) {
        var hue = Math.round(this.hue);
        ctx.fillStyle = "hsl(" + hue + ", 100%, 50% )";
        ctx.fillRect(this.x, this.y, 1, 1);
    };
    function animate() {
        pixels.forEach(function (pixel) {
            pixel.update();
            pixel.render(ctx);
        });
        requestAnimationFrame(animate);
    }

    var pixels = [new Pixel(0, 0), new Pixel(1, 0), new Pixel(0, 1), new Pixel(1, 1)];

    var canvas = document.querySelector("canvas");
    var ctx = canvas.getContext("2d");

    animate();
}

Javascript 动画渐变不显示

Javascript animated gradients don't show up

html

javascript

animation

gradient