无法使用外部JS文件添加画布

时间:2014-01-01 21:33:15

标签: javascript html5

我正在尝试向我的index.html添加一个画布,但它根本不起作用。因为它没有显示出来。这是我的index.html和game.js文件源。请帮助,我一直试图在最后一个小时左右解决这个问题,但它仍然无效。我在多个浏览器中测试过它。如果有帮助,我会使用括号作为编辑器。

的index.html

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Dogepet</title>
    </head>
    <body>
        <center><p>Dogepet</p>
        <script type="text/javascript" src="js/game.js"></script></center>
    </body>
</html>

game.js

//Create the canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 612;
canvas.height = 480;
document.body.appendChild(canvas);

//Background image
var bgReady = false;
var bgImage = new Image();
bgImage.onload = function () {
    bgReady = true;
};
bgImage.src = "images/dogepark.png";
var doge = {
    speed: 10;
    x: canvas.width/2;
    y: 380;
};

var render = function () {
    if (bgReady) {
        ctx.drawImage(bgImage, 0, 0);
    }
};

var main = function () {
    render();
};

setInterval(main,1);

1 个答案:

答案 0 :(得分:0)

查看Javascript控制台。在Firefox中,我看到此错误消息

  

[22:39:46.543]属性列表

后面的SyntaxError:missing}

用逗号;替换分号,后,一切都按预期工作。

请参阅JSFiddle