HTML5 Canvas 逐帧动画的实现_H5之家 - 中国HTML5教程资源分享第一站

HTML5 Canvas 逐帧动画的实现
和 C++游戏开发相同， HTML5逐帧动画需要的图像元素也是一张绘制了每一帧图像效果的图片。通过循环绘制各帧的图像来实现动画的效果。本示例中演示的是一个小人，默认状态下，小人朝右方站立；按下左 /右方向键的时候，小人朝左/右方奔跑（在画布中没有位移）；松开按键后保持奔跑的方向站立。其中，向左或向右站立分别是一张6帧的

图片，向左或向右奔跑分别是一张12帧的图片。代码如下： HTML 代码： XML/HTML Code 复制内容到剪贴板 1 2 3 <canvas id="canvas" width="600" height="400"> <p>Your browser does not support the canvas element!</p> </canvas>

JavaScript 代码如下：

以下这段代码已经在本人的博文中多次重用，所以就不解释了。 JavaScript Code 复制内容到剪贴板 4 5 6 7 8 9 10 } 11 12 function BasicObject(x, y, order) { 13 14 15 this.x = x; this.y = y; this.order = isNaN(order) ? 0 : order; } } Array.prototype.remove = function(obj) { for (i in this) { if (this[i] === obj) { this.splice(i, 1);

16 17 18 19 20 21 22 23 24 25 } 逐帧动画的基础对象，继承自基础对象类，添加了图像、总帧数两个属性，以及绘制逐帧对象的方法 JavaScript Code 复制内容到剪贴板 26 function FrameAnimationObject(x, y, order, image, frame) { 27 28 29 BasicObject.call(this, x, y, order); this.image = image; this.frame = frame; } this.removeFrom = function(list) { list.remove(this); } this.addTo = function(list) { list.push(this); list.sort(function(a, b) {return a.order - b.order;});

30 this.currentFrame = 0; 杨太秘丸 okl

更多相关文档:

使用HTML5 Canvas实现画图效果

使用HTML5 Canvas实现画图效果_计算机软件及应用_IT/计算机_专业资料。HTML超文本标记语言功能很简单,原理其实和拖放是类似的,主要是三个事件: 在 canvas 上绑定 mo...

基于HTML5 Canvas的画图板设计与实现

基于HTML5 Canvas的画图板设计与实现_互联网_IT/计算机...不需要插件的富动画。六、Canvas 对象将给浏览器...帧(frames)和表格的制作速度快的令您无法想像。...

HTML5实战用canvas实现炫丽的计时器效果免费学习_HTML...

视频教程,线上普智全套教学,在线学习HTML/CSS课程,HTML5实战用canvas实现炫丽的计时器效果视频下载

惊艳!9个不可思议的 HTML5 Canvas 应用试验_图文

HTML5 <canvas>元素给网页中的视觉展示带来了革命性的变化。Canvas 能够实现各种让人惊叹的视觉效果和高效的动画, 在这以前是需要 Flash 支持或者 JavaScript ...

HTML5 Canvas绘制转盘抽奖

HTML5 Canvas 绘制转盘抽奖下面简单介绍了 HTML5 Canvas 的来历、浏览器兼容性,主要内容是如何实现转盘抽奖,最后的 DEMO 非常简陋,真实场景还会有很多需要考虑和改进...

HTML5 Canvas平移,放缩,旋转演示

HTML5 Canvas 中提供了实现图形平移,旋转,放缩的 API。平移(translate) 平移坐标 translate(x, y)意思是把(0,0)坐标平移到(x,...

实验5 HTML5的图像及动画

实验5 HTML5的图像及动画_计算机软件及应用_IT/计算机_专业资料。实验 5 HTML...。 2、使用 html5 的 canvas 元素,实现如下页面的设计和实现,画出一个表盘,...

提高HTML5 Canvas性能的技巧

提高HTML5 Canvas性能的技巧_计算机软件及应用_IT/计算机_专业资料。提高HTML5 Canvas性能的技巧一:使用缓存技术实现预绘制,减少重复...

【毕业论文】基于HTML5 Canvas的画图板设计与实现

【毕业论文】基于HTML5 Canvas的画图板设计与实现_互联网_IT/计算机_专业资料。论文,毕业论文,HTML5,Canvas,画图设计,画图板,画笔,设计与实现摘要...

基于HTML5_Canvas的画图板设计与实现

基于HTML5_Canvas的画图板设计与实现_工学_高等教育_教育专区。摘要 Web2.0 ...HTML5 Canvas 逐帧动画的... 1069人阅读 2页免费 html5基础教程_canvas实...

更多相关标签: