H5游戏-Canvas绘制与JS基础

一、Promise 与 async await

Promise和async await是一个东西，async await是Promise的语法糖。

async await类似UnityC#的async await。

async修饰的function中，需要返回一个new Promise((resoleve)=>{})。

async await用同步的写法写异步，避免回调地域，是推荐写法，不用.then。

二、ctx.save与ctx.restore

一个典型使用：

复制代码

ctx.save();
ctx.xxxx();例如ctx.translate(x,y); 改变了ctx的状态
ctx.restore();

ctx很明显是content上下文缩写，ctx保存了canvans绘制的状态。

关键问题在于为什么要ctx.save，并且在更改了某些状态后要restore。

ctx.save()：把当前「画布设置」拍一张快照存起来。

ctx.restore()：把画布恢复到最近一次 save 时的快照。

比如：

复制代码

ctx.fillStyle = 'red';
drawCircle(100, 100);   // 红圆

ctx.fillStyle = 'blue';
drawCircle(200, 200);   // 蓝圆

drawCircle(300, 300);   // 还是蓝圆！因为没改回去

如果 drawCircle 内部想「暂时用红色画完再恢复」，不用 save/restore 就得自己记下原来的 fillStyle 再设回去，很麻烦。

用 save/restore 就可以：

复制代码

ctx.save();              // 存档：当前是默认状态
ctx.fillStyle = 'red';
ctx.translate(50, 50);
drawSomething();         // 在「临时状态」下画
ctx.restore();           // 读档：fillStyle、坐标等都恢复
// 这里又回到存档时的状态，不影响后面的绘制

所以：save/restore 的作用 = 把一段代码里的「设置改动」限制在这段代码内部，不污染外面。

通常会被save/restore的东西

复制代码

样式：fillStyle、strokeStyle、lineWidth、globalAlpha、font 等
变换：translate()、rotate()、scale() 等
裁剪区域：clip()
其他绘图状态（合成方式等）

三、如何驱动Canvas的帧循环

利用requestAnimationFrame(方法名如Update或者GameLoop)。

requestAnimationFrame 是浏览器/JS 运行环境自带的"系统函数"。

参数方法比如GameLoop会在绘制下一帧的时候调用，然后在GameLoop中再调用requestAnimationFrame，形成帧循环。

四、一个典型的一帧的过程

计算这一帧的时间
一个方法计算数值
一个方法负责利用计算后的数值进行绘制
调用requestAnimationFrame(自己)形成帧循环。

五、简单的分离UI和游戏Canvas，让UI粗暴的展示在Canvas前。

复制代码

    <canvas id="gameCanvas"></canvas>
     <!-- 没有z-index，会盖在canvas上面。 -->
    <div id="uiOverlay" class="ui-overlay"></div>