HTML5 Canvas 逐帧动画的实现

转载 2012年03月27日 16:29:04

转自:http://blog.csdn.net/sadfishsc/article/details/6973523

和C++游戏开发相同,HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。

本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方向键的时候,小人朝左/右方奔跑(在画布中没有位移);松开按键后保持奔跑的方向站立。

其中,向左或向右站立分别是一张6帧的图片,向左或向右奔跑分别是一张12帧的图片。

代码如下:

HTML代码:

[html] view plaincopy
  1. <canvas id="canvas" width="600" height="400">  
  2.     <p>Your browser does not support the canvas element!</p>  
  3. </canvas>  
JavaScript代码如下:

以下这段代码已经在本人的博文中多次重用,所以就不解释了。

[javascript] view plaincopy
  1. Array.prototype.remove = function(obj) {  
  2.     for (i in this) {  
  3.         if (this[i] === obj) {  
  4.             this.splice(i, 1);  
  5.         }  
  6.     }  
  7. }  
  8.   
  9. function BasicObject(x, y, order) {  
  10.     this.x = x;  
  11.     this.y = y;  
  12.     this.order = isNaN(order) ? 0 : order;  
  13.       
  14.     this.addTo = function(list) {  
  15.         list.push(this);  
  16.         list.sort(function(a, b) {return a.order - b.order;});  
  17.     }  
  18.       
  19.     this.removeFrom = function(list) {  
  20.         list.remove(this);  
  21.     }  
  22. }  
逐帧动画的基础对象,继承自基础对象类,添加了图像、总帧数两个属性,以及绘制逐帧对象的方法

[javascript] view plaincopy
  1. function FrameAnimationObject(x, y, order, image, frame) {  
  2.     BasicObject.call(this, x, y, order);  
  3.     this.image = image;  
  4.     this.frame = frame;  
  5.     this.currentFrame = 0;  
  6.       
  7.     this.draw = function(context) {  
  8.         var sw = this.image.width / this.frame;  
  9.         var sx = this.currentFrame * sw;  
  10.         context.drawImage(this.image, sx, 0, sw, this.image.height, this.x, this.y, sw, this.image.height);  
  11.         this.currentFrame++;  
  12.         this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame;  
  13.     }  
  14. }  
  15. FrameAnimationObject.prototype = new BasicObject();  

奔跑小人的类,继承自逐帧动画基础对象,指定了需求使用的图像资源,并添加了响应键盘事件的方法

[javascript] view plaincopy
  1. function Person(x, y, order) {  
  2.     FrameAnimationObject.call(this, x, y, order);  
  3.     this.image = new Image();  
  4.     this.image.src = "stop_right.png"  
  5.     this.frame = 6;  
  6.       
  7.     this.onkeydown = function(event) {    
  8.         if (event.keyCode == 37) {    
  9.             this.image.src = "run_left.png";    
  10.             this.frame = 12;    
  11.         }    
  12.         else if (event.keyCode == 39) {    
  13.             this.image.src = "run_right.png";  
  14.             this.frame = 12;      
  15.         }    
  16.           
  17.         this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame;    
  18.     }    
  19.         
  20.     this.onkeyup = function(event) {    
  21.         if (event.keyCode == 37) {    
  22.             this.image.src = "stop_left.png";    
  23.         }    
  24.         else if (event.keyCode == 39) {    
  25.             this.image.src = "stop_right.png";    
  26.         }    
  27.         this.frame = 6;    
  28.         this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame;    
  29.     }    
  30. }  
  31. Person.prototype = new FrameAnimationObject();  

动画引擎类以及程序入口

[javascript] view plaincopy
  1. function Engin() {  
  2.     var canvas = document.getElementById("canvas");  
  3.     var context = canvas.getContext("2d");  
  4.       
  5.     var buffer = document.createElement("canvas");  
  6.     buffer.width = canvas.width;  
  7.     buffer.height = canvas.height;  
  8.     var bufferCtx = buffer.getContext("2d");  
  9.       
  10.     var objs = new Array();  
  11.       
  12.     const FPS = 20;  
  13.       
  14.     this.manage = function() {  
  15.         bufferCtx.clearRect(0, 0, buffer.width, buffer.height);  
  16.         context.clearRect(0, 0, canvas.width, canvas.height);  
  17.           
  18.         for (x in objs) {  
  19.             if (objs[x].update) {  
  20.                 objs[x].update(objs);  
  21.             }  
  22.         }  
  23.           
  24.         for (x in objs) {  
  25.             if (objs[x].draw) {  
  26.                 objs[x].draw(bufferCtx);  
  27.             }  
  28.         }  
  29.           
  30.         context.drawImage(buffer, 0, 0);  
  31.     }  
  32.       
  33.     document.onkeydown = function(event) {  
  34.         for (x in objs) {  
  35.             if (objs[x].onkeydown) {  
  36.                 objs[x].onkeydown(event);  
  37.             }  
  38.         }  
  39.     }  
  40.       
  41.     document.onkeyup = function(event) {  
  42.         for (x in objs) {  
  43.             if (objs[x].onkeyup) {  
  44.                 objs[x].onkeyup(event);  
  45.             }  
  46.         }  
  47.     }  
  48.       
  49.     this.run = function() {  
  50.         var p = new Person(canvas.width / 2, canvas.height / 2);  
  51.         p.addTo(objs);  
  52.           
  53.         setInterval(this.manage, 1000 / FPS);  
  54.     }  
  55. }  
  56.   
  57. window.onload = function() {  
  58.     new Engin().run();  
  59. }  

需要说明的是,本次将键盘事件的响应放到了动画对象的类中来实现,并在引擎类中通过设定document的键盘事件来引用,这昂做事为了依照上一篇博文总所说的将动画对象的逻辑操作封装在最外层,同时避免了引擎类的过分膨胀。当动画对象逐渐增多时,效果更加明显。

相关文章推荐

HTML5 Canvas 逐帧动画的实现

和C++游戏开发相同,HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。 本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方...

HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理

最近有的朋友说他们很喜欢原生的javascript的代码,不喜欢看用引擎封装后的,所以希望我写一些原生html5代码。于是我原本就准备在这篇中讲讲用原生html5写游戏,但是写过来写过去发现还得用到l...

自定义View时,用到Paint Canvas的一些温故,简单的帧动画(动画一 ,"掏粪男孩Gif"顺便再提提onWindowFocusChanged)

转载请注明出处:王亟亟的大牛之路之前在绘画的过程中提到了静态的旋转啊,缩放啊,平移等一些效果。那么自定义的View当然也有动态的效果也就是我们的Animation,常用的有三种 View Anim...

逐帧动画 补间动画 属性动画演示

package com.example.tyxiong.myapplication;import android.animation.ObjectAnimator; import android.ap...

HTML5 Canvas 视差滚动背景的OOP实现

在最开始的博文中,我用简单的方式实现了一个视差滚动动画的示例。在本文中将对它进行OOP重写,以便能使视差滚动背景动画加入到我的游戏框架之中。 重用的代码段: HTML: Your brows...

HTML5 Canvas 碰撞检测的简单实现

本示例中演示的是模拟声纳探测的动画。在黑色的背景中画了两个黑色的障碍物,通过鼠标点击发出的声波可以将其检测出来:声波碰撞到障碍物之后,障碍物将向外发出声波。 代码如下: HTML代码: ...

JavaScript与面向对象编程

译前言:之前翻译了一篇Mozilla关于面对对象的JavaScript的简介,里面大体描述了JavaScript是如何实现OOP的。但是个人感觉比较偏理论,对prototype的描述不是提别清楚,因此...

9种网页动画常用实现方式总结

随着HTML5的逐步普及,在Web页上实现动画的方式也增加了,但也带来了一些兼容性问题,本文做一个总结。 目前来说,没有一种方式是完美的。 GIF兼容性最好,但是画质差,无交互。 Canvas很...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)