Uncaught TypeError: Cannot read property 'draw' of undefined

1.

来源自慕课网Daisy 的课程《canvas实现星星闪烁特效》，相关问题下面有我的回答

部分js脚本如下

function init() {
    can = document.getElementById("canvas");
    ctx = can.getContext("2d");

    w = can.width;
    h = can.height;

    girlPic.src = "src/girl.jpg";
    starPic.src = "src/star.png";
    
    gameLoop();

    for (var i = 0; i < num; i++) {
        stars[i] = new starObj();
        stars[i].init1();
    }

}

function gameLoop() {
    window.requestAnimFrame(gameLoop);
    drawStars();
}

function drawStars(){
    for(var i=0;i<num;i++){
        stars[i].draw();
    }
}

红色字体部分gameLoop()要放于for循环之后，放在前面就会提示Uncaught TypeError: Cannot read property 'draw' of undefined，因为数组中的值要先初始化为starObj对象，才可以引用starObj对象的方法，即stars[i].draw();

2.

循环调用函数的三种方法以及区别：

requestAnimFram(function(){}); 依据电脑性能，来确定每次回调的时间，提高效率，回调时间可能不一样

setTimeOut(function(){},time); 在定义的time时间之后，循环调用函数

setInterval(function(){},time); 先调用函数，在time时间之后第二次再调用

如果对你有用的话，给个赞呗~