HTML5 Canvas 逐帧动画的实现
2011-11-15 16:37
435 查看
和C++游戏开发相同,HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。
本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方向键的时候,小人朝左/右方奔跑(在画布中没有位移);松开按键后保持奔跑的方向站立。
其中,向左或向右站立分别是一张6帧的图片,向左或向右奔跑分别是一张12帧的图片。
代码如下:
HTML代码:
以下这段代码已经在本人的博文中多次重用,所以就不解释了。
奔跑小人的类,继承自逐帧动画基础对象,指定了需求使用的图像资源,并添加了响应键盘事件的方法
动画引擎类以及程序入口
需要说明的是,本次将键盘事件的响应放到了动画对象的类中来实现,并在引擎类中通过设定document的键盘事件来引用,这昂做事为了依照上一篇博文总所说的将动画对象的逻辑操作封装在最外层,同时避免了引擎类的过分膨胀。当动画对象逐渐增多时,效果更加明显。
本示例中演示的是一个小人,默认状态下,小人朝右方站立;按下左/右方向键的时候,小人朝左/右方奔跑(在画布中没有位移);松开按键后保持奔跑的方向站立。
其中,向左或向右站立分别是一张6帧的图片,向左或向右奔跑分别是一张12帧的图片。
代码如下:
HTML代码:
<canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element!</p> </canvas>JavaScript代码如下:
以下这段代码已经在本人的博文中多次重用,所以就不解释了。
Array.prototype.remove = function(obj) { for (i in this) { if (this[i] === obj) { this.splice(i, 1); } } } function BasicObject(x, y, order) { this.x = x; this.y = y; this.order = isNaN(order) ? 0 : order; this.addTo = function(list) { list.push(this); list.sort(function(a, b) {return a.order - b.order;}); } this.removeFrom = function(list) { list.remove(this); } }逐帧动画的基础对象,继承自基础对象类,添加了图像、总帧数两个属性,以及绘制逐帧对象的方法
function FrameAnimationObject(x, y, order, image, frame) { BasicObject.call(this, x, y, order); this.image = image; this.frame = frame; this.currentFrame = 0; this.draw = function(context) { var sw = this.image.width / this.frame; var sx = this.currentFrame * sw; context.drawImage(this.image, sx, 0, sw, this.image.height, this.x, this.y, sw, this.image.height); this.currentFrame++; this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame; } } FrameAnimationObject.prototype = new BasicObject();
奔跑小人的类,继承自逐帧动画基础对象,指定了需求使用的图像资源,并添加了响应键盘事件的方法
function Person(x, y, order) { FrameAnimationObject.call(this, x, y, order); this.image = new Image(); this.image.src = "stop_right.png" this.frame = 6; this.onkeydown = function(event) { if (event.keyCode == 37) { this.image.src = "run_left.png"; this.frame = 12; } else if (event.keyCode == 39) { this.image.src = "run_right.png"; this.frame = 12; } this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame; } this.onkeyup = function(event) { if (event.keyCode == 37) { this.image.src = "stop_left.png"; } else if (event.keyCode == 39) { this.image.src = "stop_right.png"; } this.frame = 6; this.currentFrame = (this.currentFrame >= this.frame) ? 0 : this.currentFrame; } } Person.prototype = new FrameAnimationObject();
动画引擎类以及程序入口
function Engin() { var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var buffer = document.createElement("canvas"); buffer.width = canvas.width; buffer.height = canvas.height; var bufferCtx = buffer.getContext("2d"); var objs = new Array(); const FPS = 20; this.manage = function() { bufferCtx.clearRect(0, 0, buffer.width, buffer.height); context.clearRect(0, 0, canvas.width, canvas.height); for (x in objs) { if (objs[x].update) { objs[x].update(objs); } } for (x in objs) { if (objs[x].draw) { objs[x].draw(bufferCtx); } } context.drawImage(buffer, 0, 0); } document.onkeydown = function(event) { for (x in objs) { if (objs[x].onkeydown) { objs[x].onkeydown(event); } } } document.onkeyup = function(event) { for (x in objs) { if (objs[x].onkeyup) { objs[x].onkeyup(event); } } } this.run = function() { var p = new Person(canvas.width / 2, canvas.height / 2); p.addTo(objs); setInterval(this.manage, 1000 / FPS); } } window.onload = function() { new Engin().run(); }
需要说明的是,本次将键盘事件的响应放到了动画对象的类中来实现,并在引擎类中通过设定document的键盘事件来引用,这昂做事为了依照上一篇博文总所说的将动画对象的逻辑操作封装在最外层,同时避免了引擎类的过分膨胀。当动画对象逐渐增多时,效果更加明显。
相关文章推荐
- HTML5 Canvas 逐帧动画的实现
- HTML5 Canvas 逐帧动画的实现
- 基于HTML5 Canvas实现的图片马赛克模糊特效
- HTML5 Canvas动画效果实现原理
- HTML5 Canvas实现简单的俄罗斯方块
- 基于HTML5 Canvas实现工控2D叶轮旋转
- canvas与html5实现视频截图功能
- 第六讲:html5中canvas实现疯狂的大炮轰击
- javascript和HTML5利用canvas构建猜牌游戏实现算法
- 浅谈HTML5 canvas实现移动端刮奖效果
- HTML5 中的 canvas 标签 实现动画效果
- HTML5 Canvas实现360度全景图
- 【实例】html5-canvas中实现绘制虚线的方法
- HTML5 canvas标签实现刮刮卡效果
- 基于HTML5 Canvas 实现弹出框
- 【实例】html5-canvas中实现背景图片的移动
- HTML5 canvas 实现同步时钟
- js+html5实现canvas绘制简单矩形的方法
- html5 canvas+js实现ps钢笔抠图
- HTML5 Canvas动画效果实现原理