Fatal编程技术网
  • javascript/
  • Javascript动画渐变不'；我没有出现

Javascript动画渐变不'；我没有出现

javascript html animation

Javascript动画渐变不'；我没有出现,javascript,html,animation,gradient,Javascript,Html,Animation,Gradient,我知道这很愚蠢，但我真的不知道为什么它不起作用。我希望制作动画渐变，如下所示：。 我完全复制了所有的线条，但仍然是白色背景。我将所有内容都放在一个HTML脚本中，如下所示： <!doctype html> <html> <head> <meta charset="utf-8"> <title>home</title> <!--<link href="home_css.css"

我知道这很愚蠢，但我真的不知道为什么它不起作用。我希望制作动画渐变，如下所示：。 我完全复制了所有的线条，但仍然是白色背景。我将所有内容都放在一个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>


家
html，正文{
身高：100%；
}
身体{
保证金：0；
填充：0；
溢出：隐藏；
}
帆布{
显示：块；
宽度：100%；
身高：100%；
变换：尺度（2）；
}   
window.onload=函数（）{
功能像素（x，y）{
这个.x=x；
这个。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*方向；
}
Pixel.prototype.update=函数（）{
this.hue+=this.velocity；
};
Pixel.prototype.render=函数（ctx）{
var hue=Math.round（this.hue）；
ctx.fillStyle=“hsl（“+hue+”，100%，50%）”；
ctx.fillRect（this.x，this.y，1,1）；
};
函数animate（）{
像素。forEach（函数（像素）{
pixel.update（）；
像素渲染（ctx）；
});
请求动画帧（动画）；
}
var pixels=[新像素（0,0）、新像素（1,0）、新像素（0,1）、新像素（1,1）]；
var canvas=document.querySelector（“canvas”）；
var ctx=canvas.getContext（“2d”）；
制作动画（）；
}
这正是我当前的代码。 你能帮帮我吗？如果您需要更多信息，请随时询问！：）

在加载内容之前加载
…
标记内的脚本。您需要在窗口加载事件中包装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，请检查我添加的代码段。它有效。@MarcVana，你在控制台中遇到了什么错误？你是否正确包装了窗口加载事件？问题似乎不在代码中，而是idk where。代码段在stackoverflow中运行，但如果我复制并粘贴到html文件中然后在Edge或Chrome中运行它，我的屏幕仍然是白色的。非常感谢您的回答，我认为问题不再存在于代码中。您帮助了很多。谢谢！控制台中有一个错误：加载资源失败：服务器响应状态为404（未找到）（from:60738/favicon.ico:1）看起来只有在chrome上。在edge上很好，没有错误，但仍然是白色屏幕