h5的canvas做游戏，提高性能最好用几层canvas

Question

我刚刚开始做游戏，有没有大神提示一下，比如人物层，背景层，等等层。之间又是怎样联系的？

没理解我的意思= =

比如穿越火线，进入游戏后，右计分，任务层，还有人物层，背景层等等，是这样吗？

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的重绘概念，一通百通）

Answer 2

不是大神，但还是想交流一下。
我前一段时间琢磨了一下canvas开发游戏，看了一下canvas的技术文档之后发现不用引擎去做canvas游戏会很累的。
一是canvas的点击事件需要通过坐标计算来实现，图形本身是不能绑定事件的。
然后在重绘这个方面，canvas本身没有层的概念，图像画上去就分离不了了。
点击事件要计算坐标，但是我想如果需要常态点击事件，例如开始游戏之类的，我打算以div做事件处理。
然后言归正传，我是做了两个层，一个背景，一个是蓝点层。
背景层几乎是不动的，这部分能不重绘就不重绘，否则每一帧都全画幅重绘会很傻。
对于canvas多少层恰当，我觉得无论多少层，只要你没有让dom重绘，多少个都无所谓。

Answer 3

你还是去找个引擎比较好，从头开始做很麻烦，市面上引擎也有不少了

Answer 4

头一回听说用很多层的。。。

Answer 5

我知道canvas绘制的模型可以自动调用硬件GPU加速，但没有做过h5游戏，所以没有测试过性能，你可以测试一下，用开发者工具或者模拟器可以得到数据

Answer 6

一个 Canvas 足矣
做游戏的话，建议搞清楚 canvas, layer, sprite等概念

Answer 7

学习相关原理 可以参考下这个源码 https://github.com/348052148/...