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 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
html5 css3网站菜单实现代码
Dec 23 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
May 08 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
HTML5各种头部meta标签的功能(推荐)
Mar 13 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
flex弹性布局详解
Mar 20 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中数组的分组排序实例
2014/06/01 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
PHP中require和include路径问题详解
2014/12/25 PHP
PHP之密码加密的几种方式
2015/07/29 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
在WordPress的文章编辑器中设置默认内容的方法
2015/12/29 PHP
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
JavaScript中OnLoad几种使用方法
2012/12/15 Javascript
浅谈JavaScript之事件绑定
2013/07/08 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
innerText 使用示例
2014/01/23 Javascript
Nodejs学习笔记之入门篇
2015/04/16 NodeJs
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
EasyUI 结合JS导出Excel文件的实现方法
2016/11/10 Javascript
JavaScript中 this 指向问题深度解析
2017/02/21 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
2017/12/26 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
linux 下以二进制的方式安装 nodejs
2020/02/12 NodeJs
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python计算指定日期是今年的第几天(三种方法)
2020/03/26 Python
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
高清安全摄像头系统:Lorex Technology
2018/07/20 全球购物
红领巾心向党广播稿
2014/01/19 职场文书
促销活动总结报告
2014/04/26 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
感恩教师节主题班会
2015/08/12 职场文书
安全生产培训心得体会
2016/01/18 职场文书
人力资源部工作计划
2019/05/14 职场文书
Python3的进程和线程你了解吗
2022/03/16 Python