Html5游戏开发-图形与动画（一）

最近研究了一下出来了好久的HTML5，总结了一下，准备来个系列，文中也许有不少问题，欢迎你们指正。

Canvas介绍

canvas用于在网页中绘制图形的一个元素，具体内容请查看 -> HTML5 Canvas

这里说些w3school中没有的。

当即模式

canvas元素是当即模式的图形系统，意味着当你提出要求时，他会当即绘制，而后当即忘记（绘制完成一个对象，就会销毁这个对象）。其它的图形系统（例如：SVG），使用了保留模式的图形系统，就是说绘制时他们会保留一系列将要绘制的对象。正因未Canvas不须要维护这一系列对象，因此Canvas的运行速度要快不少。

双缓存机制

在上面，咱们提到了当即模式，但这里的“当即绘制”并非你们所谓的当即，此处须要进一步说明。

在浏览器调用咱们定义的绘制方法（假设这个方法是DrawGame）绘制当前动画帧时，Canvas元素并非当即绘制出你指定的内容。相反，它会建立另外一个Canvas元素（咱们叫它Canvas2），全部的绘制实际上都在Canvas2中进行。当DrawGame方法返回时，浏览器会经过一个图形操做，复制Canvas2内容到屏幕上，咱们将这种技术称为双缓存技术，双缓存技术让动画的实现变得平滑。

坐标系统（translate）

translate(x,y)这是Canvas元素的一个方法，游戏的背景移动，大多经过该方法来实现。游戏中，咱们不会经过频繁对大量元素进行坐标计算来实现对象的滚动，由于这样的计算不只消耗计算机性能，还增长了代码的维护难度。

注意：为了避免影响后续的绘制，在使用translate(x,y)修改坐标系统后，须要再次调用translate(-x,-y)来恢复坐标系统。

具体内容请查看 -> HTML5 canvas translate()

建立Canvas镜像和恢复Canvas

在进行动画绘制时，咱们会常常的对Canvas元素的绘图环境（context）进行修改，例如strokeStyle，lineWidth等。这些修改操做都是永久的，也就意味着对他们的修改将会影响接下来任何你在Canvas元素的图形操做。那么如何让这些操做只是临时有效呢？这里咱们可使用save()和restore()方法对当前Canvas元素的绘图环境状态建立镜像和恢复。任何写在这两个方法间的环境属性修改，在执行restore后，都会恢复成save时的状态。

注意：save()和restore()须要成对出现，也就是有save，就要有restore。

 

实现平滑的HTML5动画

所谓的动画，说白了就是一张一张的图片不断的连续更换。因此，经过编程实现动画也就是不断的经过替换图片，来达到动画的效果。

可是，这种不断地替换，固然不能使用死循环while(true)来实现，传统的方法是使用setTimeout()和setInterval()方法，这两个方法虽然都提供了毫秒级的精确度，但实际上，却达不到毫秒级（参考此处：setTimeout精度测试、setInterval精度测试）。因此为了保证动画的平滑度，咱们不该该继续使用setTimeout和setInterval方法来实现对时间有着苛刻要求的动画，用什么来代替？咱们在下一节讲到。

requestAnimationFrame()方法

在w3c中的Timing Control for Script-based Animations（参考此处 -> w3c-Script-based Animations）说明中，定义了一个requestAnimationFrame()窗口对象的方法。不一样于setTimeout和setInterval方法，requestAnimationFrame是专门用来实现动画的，它使用浏览器的时间间隔进行绘制，不会掉帧。

这里须要注意的是，requestAnimationFrame方法在窗体没激活或者页签不可见的时候，动画会暂停。

下面是盗的图，支持requestAnimationFrame方法的浏览器及版本（来源：HTML5 requestAnimationFrame( ) 动画API）

javascript实例：

1 function animate(now)
2 {
3     DrawGame(now);
4     requestAnimationFrame(animate);
5 }
6 ...
7 requestAnimationFrame(animate);

 

制做基于时间的运动

游戏帧速率是不稳定的，也许此时可以60帧/秒，下一刻也许就成了10帧/秒。游戏帧的速率是变化的，咱们不能让游戏帧的速率影像到游戏中物体运动的速率，例如：人物的运动，背景的滚动，子弹的速度等等。因此，游戏中物体的运动必须是基于时间的，而且仅仅依赖于时间（例如：像素/秒），而不是动画帧速率。

在上一节的实例中，咱们能够发现animate有个参数是now，它表明当前绘制的时间，既然有了这个参数，咱们就能知道两次时间间隔，从而计算出运动的距离。

javascript实例：

1 var speed = 50;
2 var lastAnimationTime = new Date();
3 var offsetX = 0;
4 function SetBackgroundOffsetX(now)
5 {
6     offsetX += speed * (now - lastAnimationTime)/1000
7     ...
8     //若是一直加下去，背景会慢慢移出屏幕，下面的代码本身写吧
9 }

 

结尾

到这里，关于图形与动画的内容就差很少结束了，内容很少，代码不多，可是我以为已经够了，毕竟大部分的基础知识都能在网上找到哈哈。

本人不是HTML5大佬，如文中有问题，请你们帮忙指正，谢谢你们~