Javascript 动画渐变不显示

Question

I know it's pretty stupid, but I really don't know why it does not work.我知道这很愚蠢，但我真的不知道为什么它不起作用。 I'm looking to make animated gradients like here: https://codepen.io/desandro/pen/BzJkQv .我正在寻找像这里这样的动画渐变： https://codepen.io/desandro/pen/BzJkQv 。 I've copied exactly all the lines, but it's still white background.我已经完全复制了所有的行，但它仍然是白色背景。 I've put everything in just a HTML script, here it is:我把所有东西都放在了一个 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>

This is exactly my current code.这正是我当前的代码。 Could you please help me?请你帮助我好吗？ If you need any more information, feel free to ask: :)如果您需要更多信息，请随时询问：:)

Answer 1

Scripts inside the <script>...</script> tag is loaded before the content. <script>...</script>标签内的脚本在内容之前加载。 You need to wrap js logic in the window load event.您需要在window 加载事件中包装 js 逻辑。 Like this:像这样：

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

Full code:完整代码：

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 动画渐变不显示

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-01-31 15:47:52

Javascript 动画渐变不显示

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-01-31 15:47:52

解决方案1
1 已采纳 2021-01-31 15:47:52