html5 利用canvas实现超级玛丽简单动画


Posted in HTML / CSS onSeptember 06, 2013

最近在学习html5,其中涉及到很关键的元素canvas-画布,在网上下载了一些游戏源代码,虽然能看懂,但是想单独地针对某个功能提取出来还是有难处的,于是乎自己又上网查找了一些例子,才将超级玛丽简单的动画给实现了。

设计中涉及到的主要的drawImage()函数

(1)drawImage(image,x,y)该方式是最基本的操作方式,具体是指将你整个要操作的图像对象描绘在指定的坐标轴上,左上角为(0,0)原点,以此计算你想要它描绘的位置
(2)drawImage(image,x,y,width,height)该方式是指将你需要操作的图像对象进行缩放,然后描绘到画板上,width和height就是你希望图片描绘之后的大小
(3)drawImage(image,sourceX,sourceY,sourceWidth,sourceHeight,destX,destY,destWidth,destHeight) 这是最为复杂的方式,但是也是相当有用的。它表示在你想要操作的图像对象中,选择你想要定位的左上角位置(sourceX,sourceY),然后截取你想要的宽度和高度(sourceWidth,sourceHeight),将截取出来的图像描绘到画板对应的位置(destX,destY)以及对应的范围(destWidth,destHeight)之内。

1.首先上网找了下超级玛丽连贯的走路动作的图片(如下图)
html5 利用canvas实现超级玛丽简单动画 
2.新建一个html5文件,此处命名为mario.html,定义canvas元素,开始动画start按钮,暂停动画stop按钮
html5 利用canvas实现超级玛丽简单动画 
3.相关的js函数
html5 利用canvas实现超级玛丽简单动画
 
html5 利用canvas实现超级玛丽简单动画

HTML / CSS 相关文章推荐
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
Nov 05 HTML / CSS
HTML5: Web 标准最巨大的飞跃
Oct 17 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
Apr 24 HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
CSS3常见动画的实现方式
Apr 14 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
Sep 03 #HTML / CSS
HTML5实现经典坦克大战坦克乱走还能发出一个子弹
Sep 02 #HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 #HTML / CSS
HTML5 window/iframe跨域传递消息 API介绍
Aug 26 #HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 #HTML / CSS
HTML5 script元素async、defer异步加载使用介绍
Aug 23 #HTML / CSS
html5基础教程常用技巧整理
Aug 20 #HTML / CSS
You might like
PHP生成excel时单元格内换行问题的解决方法
2010/08/26 PHP
初品cakephp 入门基础
2012/02/16 PHP
简单的php文件上传(实例)
2013/10/27 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
js function使用心得
2010/05/10 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
2012/06/14 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
js实现漂浮回顶部按钮实例
2015/05/06 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
获取jqGrid中选择的行的数据
2016/11/30 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
多个应用共存的Django配置方法
2018/05/30 Python
解决Python计算矩阵乘向量,矩阵乘实数的一些小错误
2019/08/26 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
Python判断远程服务器上Excel文件是否被人打开的方法
2020/07/13 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
学生档案自我鉴定
2013/10/07 职场文书
人力资源经理自我评价
2014/01/04 职场文书
端午节活动策划方案
2014/03/09 职场文书
开工仪式主持词
2014/03/20 职场文书
离婚协议书范本
2015/01/26 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
解决flex布局中子项目尺寸不受flex-shrink限制
2022/05/11 HTML / CSS
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技