Javascript动画渐变不显示答案

【问题标题】：Javascript animated gradients don't show upJavascript动画渐变不显示
【发布时间】：2021-01-31 15:39:10
【问题描述】：

我知道这很愚蠢，但我真的不知道为什么它不起作用。我正在寻找像这里这样的动画渐变：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>

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

【问题讨论】：

标签： javascript html animation gradient

【解决方案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();
}

【讨论】：

它仍然不起作用...... :( 我现在用你的代码编辑我的问题。
@MarcVana，请检查我添加的 sn-p。它有效。
@MarcVana，您在控制台中遇到什么错误？您是否正确包裹了窗口加载事件？
看来问题不在代码中，而在哪里。 sn-p 在 stackoverflow 中运行，但如果我将它复制并粘贴到我的 html 文件中并在 Edge 或 Chrome 中运行它，我的屏幕仍然是白色的。非常感谢您的回答，我认为问题不再出在代码中了。你帮了很多忙。谢谢！
我在控制台中有一个错误：加载资源失败：服务器响应状态为 404（未找到）（来自 :60738/favicon.ico:1 ）似乎仅在 chrome 上。在边缘它很好，没有错误，但仍然是白屏