Question

我在localhost上制作我的网络应用程序，但浏览器页面一直显示为空白，我做错了什么？感谢

{{1}}

Answer 1

您在分配给onload的匿名函数中声明了一堆变量。它们不是全局的。

然后尝试（按时间间隔）将它们作为全局变量访问。

如果您在开发人员工具中查看控制台，您应该会看到一堆 ReferenceErrors 。

将setInterval和draw函数声明移到分配给onload的匿名函数中。

window.onload = function () {
    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext("2d"),
        W = window.innerWidth,
        H = window.innerHeight;


    setInterval(draw, 33);

    function draw() {
        ctx.globalcompositeOperation = "source-over";
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, W, H);
    }
}

    <canvas id="canvas"></canvas>

Answer 2

可变范围的一些问题，以及@Quentin提到的其他问题。您在ctx内定义了局部变量W，H和window.onload，无法从draw访问。

<html>

<head>
  <script>
    var ctx, W, H;

    window.onload = function() {
      var canvas = document.getElementById("canvas");
      W = window.innerWidth;
      H = window.innerHeight;
      ctx = canvas.getContext("2d");
      setInterval(draw, 33);
    }

    function draw() {
      ctx.globalCompositeOperation = "source-over";
      ctx.fillStyle = "black";
      ctx.fillRect(0, 0, W, H);
    }
  </script>
</head>

<body>
  <canvas id="canvas"></canvas>
</body>

</html>

为了将来参考，将脚本移到body的末尾也是一个好主意，因此您不必为窗口加载或DOMContentLoaded添加事件。

Javascript没有出现在浏览器中

2 个答案: