Javascript 我得到了一个“答案”；未捕获类型错误：无法读取属性'；宽度'；“无效”的定义；在完成教程之后

这是我的javascript代码，但对我来说似乎没有什么问题。我的html id也没有错。我在youtube上看了一个教程，它对那个人起了作用。有人能帮我吗

var canvas;
var ctx;

var background;
var width = 300;
var height = 200;

var cloud;
var cloud_x;

function init() {
    canvas = document.getElementById("mycanvas");
    width = canvas.width; //THIS IS WHERE I GET MY ERROR
    height = canvas.height;
    ctx = canvas.getContext("2d");

    // init background 
    background = new Image();
    background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';

    // init cloud
    cloud = new Image();
    cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
    cloud.onload = function(){
        cloud_x = -cloud.width;
    };

    return setInterval(main_loop, 10);
}

function update(){
    cloud_x += 0.3;
    if (cloud_x > width ) {
        cloud_x = -cloud.width;
    }
}

function draw() {
    ctx.drawImage(background,0,0);
    ctx.drawImage(cloud, cloud_x, 0);
}

function main_loop() {
    draw();
    update();
}

init();

我的html

<canvas id="mycanvas" width="640" height="480">Alternative text if browser don't support canvas.</canvas>

浏览器不支持画布时的备选文本。

更改此行：

init();

document.addEventListener('DOMContentLoaded', init, false);

通过这一行：

init();

document.addEventListener('DOMContentLoaded', init, false);

当

DOM

就绪时，将调用init函数

---

似乎在加载

之前调用了

init（）

。脚本何时运行？@Musa它们位于不同的文件中。我还发现init（）是一个匿名函数。@PM77-1它在chrome中打开窗口后立即运行。我是否需要一个“window.addEventListener（'load'，init，false）；”？匿名函数没有名称，因此init不能是匿名函数，这又与什么有什么关系？