canvas.getContext('2d');错误答案

【问题标题】：canvas.getContext('2d'); errorcanvas.getContext('2d');错误
【发布时间】：2015-08-06 11:10:27
【问题描述】：

我正在尝试使用本教程：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 中标识画布

【问题讨论】：

请提供您的代码。
@JamesIves 好的，我添加了。
您确定在 HTML 中为您的画布提供了“canvas”的 id 吗？
@saadq 就是这样！谢谢！

标签： javascript html canvas

【解决方案1】：

从我可以从您的 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>

【讨论】：

@Raven。欢迎来到 Stackoverflow！如果这回答了您的问题，您应该单击该问题旁边的复选标记。此复选标记将您的问题从“未回答”列表中删除。 :-)
@markE 是的，我会更早，但选择答案有十五分钟左右的时间限制，我不知道为什么......