Javascript “如何修复”；无法读取属性'；getContext'；“无效”的定义；错误？让ctx=canvas.getContext（"；2d"；）_Javascript_Html_Null

Javascript “如何修复”；无法读取属性'；getContext'；“无效”的定义；错误？让ctx=canvas.getContext（"；2d"；）

javascript html

Javascript “如何修复”；无法读取属性'；getContext'；“无效”的定义；错误？让ctx=canvas.getContext（"；2d"；）,javascript,html,null,Javascript,Html,Null,下面是给我带来问题的代码，特别是行“let ctx=canvas.getContext（“2d”）；”。我一直在阅读类似问题的解决方案，但似乎都没有帮助 index.js import Paddle from "/src/paddle.js"; let canvas = document.getElementById("gameScreen") let ctx = canvas.getContext("2d"); const GAME_WIDTH = 800; const GAME_HEIG

下面是给我带来问题的代码，特别是行“let ctx=canvas.getContext（“2d”）；”。我一直在阅读类似问题的解决方案，但似乎都没有帮助

index.js

import Paddle from "/src/paddle.js";

let canvas = document.getElementById("gameScreen")
let ctx = canvas.getContext("2d");

const GAME_WIDTH = 800;
const GAME_HEIGHT = 600

let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);

paddle.draw(ctx);

let lastTime =0;

function gameLoop(timestamp){
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    ctx.clearRect(0, 0, 800, 600);
    paddle.update(deltaTime);
    paddle.draw(ctx);

    requestAnimationFrame(gameLoop);
}

gameLoop();

index.html

<html>
  <head>
    <title>Space Invaders</title>
    <meta charset="UTF-8" />
    <style>
      #gameScreen {
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
      <h1>Please stop giving me errors</h1>
    <canvas id="gameScreen" width="800" height="600"></canvas>

    <script src="src/index.js"></script>
  </body>
</html>


太空入侵者
#游戏屏幕{
边框：1px纯黑；
}
请不要给我错误

我建议将所有代码包装在

index.js

的

窗口中。onload

// index.js

import Paddle from "/src/paddle.js";

window.onload = function() {
  let canvas = document.getElementById("gameScreen");
  ....
  gameLoop();
}

这样写代码解决了我的问题

"use strict";

class Paddle {
  constructor(gameWidth, gameHeight) {
    this.width = 150;
    this.height = 20;

    this.position = {
      x: gameWidth / 2 - this.width / 2,
      y: gameHeight - this.height - 10
    };
  }
  draw(ctx) {
    ctx.fillStyle = "#0ff";
    ctx.fillRect(this.position.x, this.position.y, this.width, this.height);
  }

  update(deltaTime) {
    if (!deltaTime) return;

    this.position.x += 5 / deltaTime;
  }
}

(function() {
  let canvas = document.getElementById("gameScreen");
  let ctx = canvas.getContext("2d");

  const GAME_WIDTH = 800;
  const GAME_HEIGHT = 600;

  let paddle = new Paddle(GAME_WIDTH, GAME_HEIGHT);

  paddle.draw(ctx);

  let lastTime = 0;

  function gameLoop(timestamp) {
    let deltaTime = timestamp - lastTime;
    lastTime = timestamp;

    ctx.clearRect(0, 0, 800, 600);
    paddle.update(deltaTime);
    paddle.draw(ctx);

    requestAnimationFrame(gameLoop);
  }

  gameLoop();
})();