js+面向对象+html5+canvas相关笔记（四）

1.函数的四种调用模式
◆函数调用 == window
◆方法调用 == 宿主
◆构造器 == 实例对象
◆上下文（间接调用） == 自由指定
★函数执行时，内部的this指向才会确定，函数执行时this的指向与定义无关，与调用方式有关。


2.绘制环境的保存与回滚
◆状态可以保存多份
◆回滚每次回滚到最近的状态保存
◆状态的保存与回滚与路径无关。


3.判断点在不在路径中：
◆ctx.isPointInPath(要判断的点x轴坐标，要判断的点y轴坐标);


4.请求动画帧函数 requestAnimationFrame
◆请求动画帧函数，这个函数和setTimeout方法是用类似，都是定时器，却别在于setTimeout可以自由指定回调的触发时间，而requestAnimationFrame函数回调的触发是由浏览器来控制的。
◆requestAnimationFrame(callback);，当浏览器重绘页面的时候，就会调用这个callback，这样callback的执行就会比较稳定，适合用来做流畅的动画。
◆【
//开闭原则
var isRun=true;
(function con(){
console.log(111);
//如果要不停的调用就设置isRun为true，如果不再调用了，就设置isRun为false
if(isRun){
//不停的调用
requestAnimationFrame(con);
})();
}
】


5.drawImage的第一个参数，可以是img、canvas、甚至video，可以将另一个画布中的内容画到新的画布中去。


6.飞翔的小鸟（Flappy_bird）说明
◆设置模式的使用：【
除了tool外，所有模块儿都是用了沙箱模式；另外这些模块儿还使用了工厂模式；bird模块儿使用了单例模式；gameScene使用外观和观察者模式；tool模块儿有一个原型模式，用来提供其它模块儿对象的原型来进行克隆成员。
】
◆继承的使用：【
除了tool外，其它模块儿要么使用了原型覆写的继承方式，要么使用混合式继承。
】
◆模块儿之间的依赖：【
几乎所有的模块儿间接依赖tool模块儿，所以它需要先引入；gameScene模块儿依赖bird、land、pipe、sky模块儿。
主函数模块儿依赖于gameScene、overScene模块儿。
】
◆tool模块儿：【
extend：实现混合式继承
loadImage：图片加载器
】
◆sky模块儿：【
draw：绘制天空背景
update：更新天空背景下一帧绘制时所需的数据
action：让天空背景真正的动起来
】
◆bird模块儿：【
draw：绘制小鸟
update：更新小鸟下一帧绘制时所需的数据
bind：给小鸟绑定鼠标事件
_init：用来初始化对象所需的数据
action：让小鸟真正动起来
】
◆land模块儿：【
_init：用来初始化对象所需的数据
draw：绘制大地
update：更新大地下一帧绘制时所需的数据
action：让大地真正动起来
】
◆pipe模块儿：【
_init：用来初始化对象所需的数据
draw：绘制管道
_drawPath：绘制管道的路径
update：更新管道下一帧绘制时所需的数据
action：让管道真正动起来
】
◆gameScene模块儿：【
_initRoles：用来初始化所有角色
_draw：用来画所有角色，让所有角色动起来
addListener：添加小鸟死亡事件的听众
triggerBirdOver：触发小鸟死亡事件，通知所有听众
action：让游戏开始，所有场景开始动起来
】
◆overScene模块儿：【
draw：绘制游戏结束时的场景
】