HTML5 Canvas 动画实例：游戏人物的跑步动画

2020年12月22日 397点热度 0人点赞 0条评论

在开发在线游戏时，绘制动画是非常重要的。本节介绍一个使用 Canvas API 实现的动画实例——游戏人物的跑步动画。

动画的概念及原理

1．动画

动画是通过一幅幅静止的，内容不同的画面（即帧）快速播放使人们在视觉上产生运动的感觉。这是利用了人类眼睛的视觉暂留原理。利用人的这种生理特性可制作出具有高度想象力和表现力的动画影片。

2．原理

人们在看画面时，画面会在大脑视觉神经中停留大约 1/24 秒，如果每秒更替 24 个画面或更多，那么前一个画面还没在人脑中消失之前，下一个画面进入人脑，人们就会觉得画面动起来了，它的基本原理与电影、电视一样，都是视觉原理。

在计算机上要实现动画效果，除了绘图外，还需要解决下面两个问题：

（1）定期绘图，也就是每隔一段时间就调用绘图函数进行绘图。动画是通过多次绘图实现的，一次绘图只能实现静态图像。

可以使用 setInterval()方法设置一个定时器，语法如下：

setInterval(函数名,时间间隔)

时间间隔的单位是毫秒（ms），每经过指定的时间间隔系统都会自动调用指定的函数完成绘画。

（2）清除先前绘制的所有图形。物体已经移动开来，可原来的位置上还保留先前绘制的图形，这样当然不行。解决这个问题最简单的方法是使用 clearRect(x, y, width, height)方法清除画布中指定区域的内容。

图 5-13 是一个方向（一般都是 4 个方向）的跑步动作序列图。假如想获取一个姿态的位图，可利用 Canvas 的上下文 2D 对象的 drawImage(image, sourceX, sourceY, sourceWidth,sourceHeight,destX, destY, destWidth, destHeight)将源位图上某个区域（sourceX, sourceY,sourceWidth, sourceHeight）拷贝到目标区域的（destX, destY）坐标点处，显示大小为（宽destWidth, 高 destHeight）。

【例 5-14】实现从跑步动作序列 Snap1.jpg 文件中截取的第 3 个动作（帧）。分析：在 Snap1.jpg 文件中，每个人物动作的大小为 60 像素×80 像素，所以截取源位图的 sourceX=120，sourceY=0，sourceWidth=60, sourceHeight=80 就是第 3 个动作（帧）。

<canvas id="myCanvas" height=250 width=250>您的浏览器不支持 canvas。</canvas>
<script type="text/javascript">
function draw()
{
 var canvas=document.getElementById("myCanvas"); //获取网页中的 canvas 对象
 var context = canvas.getContext("2d"); //获取 canvas 对象的上下文
 var imageObj = new Image(); //创建图像对象
 imageObj.src = "Snap1.jpg";
 imageObj.onload = function(){
 //从原图(120, 0)位置开始截取中间一块宽 60*高 80 的区域，原大小显示在屏幕(0,0)处
 ctx.drawImage(imageObj, 120, 0, 60, 80, 0, 0, 60, 80);
 };
}
window.addEventListener("load", draw, true);
</script>

浏览例 5-14 的结果如图 5-14 所示，在页面上仅仅显示第 3 个动作。

游戏人物的跑步动画

【例 5-15】实现游戏人物的跑步动画。首先定义一个 Canvas 元素，画布的长和宽都是 300，代码如下：

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas 实现游戏人物的跑步动画</title>
</head>
<body>
<canvas id="canvasId" width="300" height="300"></canvas>
</body>
</html>

在 JavaScript 代码中定义一个 Image 对象，用于显示 Snap1.jpg。然后定义一个 init() 函数，初始化 Image 对象，并设置定时器，代码如下：

<script type="text/javascript">
 var imageObj = new Image();
 var x =300;
 var n =0; //计数器
108 HTML5 网页游戏设计从基础到开发
 function init(){
 imageObj.src = 'Snap1.jpg';
 imageObj.onload = function(){ //图片加载成功
 setInterval(draw,100); //定时器，每 0.1 秒执行一次 draw()函数
 };
//此处省略 draw()函数的代码
 window.addEventListener("load", init, true);
</script>

使用了定时器，每隔 100 毫秒就会在 Snap1.jpg 图片截取一张 60 像素×80 像素大小的小图并绘制出来，且每次向左移 15 像素，直到最左端时重新从右侧开始，不停循环，就可见游戏人物在屏幕上不停地奔跑。下面分析 draw()函数的实现。例 5-14 中仅仅显示人物的第三个动作，而为了实现动画需要 clearRect(x, y, width, height)不断清除先前绘制的动作图形，再绘制后续的动作。所以需要一个计数器 n，记录当前绘制到第几动作（帧）了。

function draw()
{
 var canvas=document.getElementById("myCanvas"); //获取网页中的 canvas
 对象
 var ctx = canvas.getContext("2d"); //获取 canvas 对象的上下文
 ctx.clearRect(0,0,300,300); //清除 canvas 画布
 //从原图(60*n)位置开始截取中间一块宽 60*高 80 的区域，显示在屏幕(x,0)处
 ctx.drawImage(imageObj, 60*n, 0, 60, 80, x, 0, 60, 80);
 if(n>=8){
 n=0;
 }else{
 n++;
 }
 if(x>=0){
 x=x-30; //前移 30 像素
 }else{
 x=300; //回到右侧
 }
}