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时间之后第二次再调用
如果对你有用的话,给个赞呗~