HTML5中Canvas绘图方法性能测试

canvas中绘图的方法无非三样：绘制矢量图，drawImage,putImageData。在做战棋游戏时，效果主要用图片实现，所以主要是评测drawImage，putImageData两个方法的效能。

测试中主要设置如下几个技术指标 ： 刷新频率i, 图片大小w,h， 绘制图片个数n, FF占CPU比cpu， 图层数量layers

采用drawImage方法：

1. 刷新频率i = 20, 图片个数n=255, w=h=15, cpu=28+%

2. n = 100, i =200, w=h =48, cpu = 5%

3. n = 100, i =20, w=h =48, 每次刷新clearRect整个画布，cpu=50+%

4. n = 100, i =20, w=h =48, 每次clearRect之前把画布隐藏hide，绘好所有图片后显示画布show, cpu = 50+%

5. n = 100, i =125, w=h =48, clearRect, 添加100个div层悬浮在canvas上，设置背景色， cpu=13%

6. n = 1, i =20, w=h=225, cpu = 15~20% 每次只绘一张大图，格式为png

7. n = 100, i =125, w=h =48, clearRect 每次绘一张较大图的一部分，宽高为48 cput = 18%

8. n = 200, i =125, w=h =48, clearRect 每次绘大小仅为48的图片,格式为png cput = 14%

9. n = 225, i =20, cpu = 28%, w=h=15 绘制png cpu=38%

10. n = 225, i =20, cpu = 28%, w=h=15 绘制bmp cpu=25%

11. n = 225, i =20, w=h=15, 生成n个浮动折叠在一起的canvas，每个画布上只画一张图片，cpu = 50+%

采用putImageData方法：

1. 刷新频率i = 20, 图片个数n=255, w=h=15, cpu=8%

2. n = 400, i =20, w=h =20, cpu = 28%

3. n = 900, i =20, w=h =30, cpu = 50+%

4. n = 225, i =20, w=h = 15, layers =5, 生成5个浮动折叠在一起的canvas，cpu = 30%

5. n=255, i = 20, w=h=15, 图片类型为bmp cpu=8%

6. n=255, i = 20, w=h=15, 每次更新时clearRect， cpu=25%

7. n = 255, i =20, w=h =15, 每次clearRect之前把画布隐藏hide，绘好所有图片后显示画布show, cpu = 25%

经过一系列的测试发现对效率影响如下：

a. 影响最大的为刷新频率，这也是显而易见。

b. putImageData比drawImage效率高很多。putImageData是把一块区域的像素集直接放到画布上，会替换到画布原有图像，但是效率极高。

c. 每次更新时clearRect会很耗资源，但把ff缩小时，消耗就很少了，clearRect主要是耗显卡导致cpu上升了。最好能区域更新

d. 多个画布叠加时，即使每个画布工作量很少，叠加数量在3个以上时，cpu占用率就会大幅提升，估计是在浏览器处理时还是需要做canvas的像素操作。

e. 在canvas上放有背景色的div层，对效率影响不大，就是说如果有可能就用静态HTML做

f. 画同样数量的Image时，虽然画出的尺寸一样大，但是图片较小的占用资源较少

g. drawImage时，画bmp要比png占用cpu小很多，不需要考虑透明度。

h. putImageData时，bmp和png占用内存基本一样多。

i. putImageData时，隐藏与显示画布占用资源基本一样多。

所以，对SLG引擎做了如下更改：

针对频率优化游戏底层设计，将显示与控制层分离，控制和状态都是实时响应，显示层则改为一秒16帧，同时提供20ms就刷新的高实时响应的绘画情况。

加载完图片后，通过一个隐藏的canvas将图片切割为数个小图片，每个图片对应角色的一个动作。绘图时绘小图片。

将原先的分层多canvas的结构取消，保留层的概念，但是只有一个canvas，层只是绘制的先后顺序不同

区域更新。只更新当前屏幕所展示区域。

做了上述更改后，CPU占用率从原先的50+%降为10%，在web端实现SLG引擎还是可能的。