Question

我在index.html文件中编写了以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Canvas Test</title>
    <script src="js/main.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body onload="initialise();loadCanvas();">
    <canvas id="gameCanvas" width="800" height="600">   
    </canvas>
</body>
</html>

这在我的main.js文件中：

var clickCount;
var gameCanvas;
var myImage;

function initialise()
{
    clickCount = 0;
    gameCanvas = document.getElementById("gameCanvas");
    myImage = new image();
    myImage.src = "../img/test.png";
}

function loadCanvas()
{
    alert(clickCount);
}

代码应该在页面加载时显示警告0，但警报会显示undefined。所以我在index.html

中更新了这样的代码

<body onload="initialise();">

并在initialise()中修改了main.js这样的函数：

function initialise()
{
    clickCount = 0;
    gameCanvas = document.getElementById("gameCanvas");
    myImage = new image();
    myImage.src = "../img/test.png";
    loadCanvas();
}

现在警报根本没有发生。谁能告诉我这里我做错了什么？我是HTML5和javascript的新手，我真的很沮丧。无法在任何地方找到解决方案。

Answer 1

您需要学习检查浏览器错误控制台以查看脚本错误的位置。

你需要改变这个：

new image();

到此：

new Image();

这会导致脚本错误，从而中止初始化函数。

Answer 2

您有大写错误：

myImage = new image();

应该是：

myImage = new Image(); // notice the capital I

如果您检查控制台是否有错误，您会看到：

Uncaught ReferenceError: image is not defined

指出问题所在。此错误打破了您的脚本，并且从未到达警报线。

Answer 3

练习使用一些调试器，如firebug或chrome调试工具。找到这样的错误会非常有帮助。

Javascript函数未正确显示警报

3 个答案: