h5的canvas做游戏

Question

h5的canvas做游戏，提高性能最好用几层canvas我刚刚开始做游戏，有没有大神提示一下，比如人物层，背景层，等等层。之间又是怎样联系的？没理解我的意思= =比如穿越火线，进入游戏后，右计分，任务层，还有人物层，背景层等等，是这样吗？

Answer 1

1. 做canvas的游戏，最好从一个引擎入手，入门级别的引擎比如：lufy（JS开源，并且有博客做指导），在实现一些效果之后，再查看源代码学习如果实现；

2. 你说的这些层，并不用新建那么多的Canvas，一个Canvas足矣；

3. 原始的canvas并不支持层，这些层都是引擎提供的概念，现市面上的引擎大部分类似Flash，层叫Sprite。

   层的概念：这好比一张JPG图片本身不支持层，但是PhotoShop里面有层的概念，很多张图片组合起来就形成了一个图标，保存成的PSD文件包含了这些信息。最终导出的JPG只是一张图，而Canvas本身就是一张一张的图往上贴，这就要提到FPS，看下一条；

4. 所谓的FPS为60Hz，是指1秒钟将Canvas画布重绘60次，并且在重绘的过程中计算每一个「物件」、「刚体」的新位置，然后将这些「物件」绘制在对应的坐标上；

5. 一个Canvas就是一个场景Stage，然后背景是一个层，人物是一个，然后引擎计算人物的坐标，以及背景的坐标，绘制上去。如果有操作，则计算新的位置，重新绘制上去。

6. 这里的层也有层级概念，类似DIV等，当然，层是引擎实现的，层级也是引擎实现的。

7. 鼠标点击事件在Canvas里面比较麻烦，入门最好使用引擎来做。

PC游戏都是不停的重绘（通过显卡、CPU），但是一个好的引擎，会通过计算后，发现并不用重绘背景，只重绘一小部分。比如egret引擎，支持脏重绘。（这其实也是Windows的重绘概念，一通百通）