[英]Problem with : "Uncaught TypeError: Cannot read property 'getContext' of null" when trying to code with Javascript. Further information below
var canvas = document.querySelector("myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
我正在嘗試編寫一個簡單的程序，您可以在其中使用鍵在畫布周圍移動矩形。
出於某種原因，當我加載它時，我收到以下錯誤：“未捕獲的類型錯誤：無法讀取 null 的屬性‘getContext’”
這讓我很困惑，因為我已經用這個編寫了另一個游戲，但我沒有收到這個錯誤。
另外，我嘗試使用“window.onload=function(){}”解決方案，但這似乎沒有幫助。
任何建議和幫助將不勝感激，謝謝。
問題在這里document.querySelector("myCanvas") 。 querySelector 采用 css 選擇器，而 myCanvas 是畫布的 id。
它需要是： document.querySelector("#myCanvas")
var canvas = document.querySelector("#myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
您正在調用document.querySelector ，但您傳遞的是原始 ID 而不是 CSS 選擇器。 要修復它，請改用document.getElementById ：
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); window.addEventListener("keydown", moveSomething, false); var dx = 0; var dy = 0; function moveSomething(e) { switch(e.keycode) { case 37: //left key dx -= 2; break; case 38: //up key dy += 2; break; case 39: //right key dx += 2; break; case 40: //down key dy -= 2; break; } drawRect(); } function drawRect() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.rect(250 + dx, 200 + dy , 25, 25); ctx.fillStyle = "green"; ctx.fill(); ctx.closePath(); }
* { padding: 0; margin: 0; } canvas { background: #eee; display: block; margin: 0 auto; }
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title>basic game</title> </head> <body> <canvas id="myCanvas" height="500px" width="500px"></canvas> </body> </html>
未捕獲的TypeError：無法讀取null的屬性'getContext'
[英]Uncaught TypeError: Cannot read property 'getContext' of null
未被捕獲的TypeError：在zoom.html：8處無法讀取null的屬性“ getContext”
[英]Uncaught TypeError: Cannot read property 'getContext' of null at zoom.html:8
未捕獲的TypeError：無法讀取null Node.js的屬性'getContext'
[英]Uncaught TypeError: Cannot read property 'getContext' of null Node.js
錯誤：未捕獲的類型錯誤：無法讀取 null 的屬性“getContext”
[英]error: Uncaught TypeError: Cannot read property 'getContext' of null
在畫布上繪制時出現“未捕獲的TypeError：無法讀取未定義的屬性'getContext'”
[英]“Uncaught TypeError: Cannot read property 'getContext' of undefined” when drawing on canvas
未捕獲的TypeError：無法讀取未定義的屬性'getContext'
[英]Uncaught TypeError: Cannot read property 'getContext' of undefined
Javascript Uncaught TypeError: Cannot read property 'append' of null in code
[英]Javascript Uncaught TypeError: Cannot read property 'append' of null in code
未捕獲的類型錯誤：在獲取計算機的本地 ip 代碼時，無法讀取 javascript 代碼中 null 的屬性“1”
[英]Uncaught TypeError: Cannot read property '1' of null in javascript code when getting local ip Address of computer
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.