我正在尝试使用本教程:http://html5gamedev.samlancashire.com/making-a-simple-html5-canvas-game-part-1-moving-a-sprite/
我检查了我的代码，它与教程指示的完全相同(这里是:http://pastebin.com/1JsU28cx)，但是每当我运行控制台时都会给我这个错误:“Uncaught TypeError: Cannot read property 'getContext'为空”
错误在 var ctx = canvas.getContext('2d'); 我看过几个类似的问题，但他们没有帮助......
我不知道如何解决这个问题......
谢谢!
编辑:我忘记在 html 中标识 canvas
最佳答案
从您的 javascript 中我可以确定只有 pastebin，你要么没有 <canvas> , 或者它的 id 不是 "canvas" .确保将 id 更改为 "canvas" , 否则 document.getElementById将返回 null :
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
var mySprite = {
x: 200,
y: 200,
width: 50,
height: 50,
speed: 200,
color: '#c00'
};
var keysDown = {};
window.addEventListener('keydown', function(e) {
keysDown[e.keyCode] = true;
});
window.addEventListener('keyup', function(e) {
delete keysDown[e.keyCode];
});
function update(mod) {
if (37 in keysDown) {
mySprite.x -= mySprite.speed * mod;
}
if (38 in keysDown) {
mySprite.y -= mySprite.speed * mod;
}
if (39 in keysDown) {
mySprite.x += mySprite.speed * mod;
}
if (40 in keysDown) {
mySprite.y += mySprite.speed * mod;
}
}
function render() {
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = mySprite.color;
ctx.fillRect(mySprite.x, mySprite.y, mySprite.width, mySprite.height);
}
function run() {
update((Date.now() - time) / 1000);
render();
time = Date.now();
}
var time = Date.now();
setInterval(run, 10);
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
</html>关于javascript - canvas.getContext ('2d' );错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30430396/