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打造一款漂亮的卡哇伊按钮
Mar 20 HTML / CSS
利用CSS3实现文字折纸效果实例代码
Jul 10 HTML / CSS
html5配合css3实现带提示文字的输入框(摆脱js)
Mar 08 HTML / CSS
使用jquery实现HTML5响应式导航菜单教程
Apr 02 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
Jul 07 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
解析HTML5中的新功能本地存储localStorage
Mar 01 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
Jun 27 HTML / CSS
浅谈HTML5新增和废弃的标签
Apr 28 HTML / CSS
canvas 基础之图像处理的使用
Apr 10 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
HTML实现仿Windows桌面主题特效的实现
Jun 28 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
基于mysql的论坛(1)
2006/10/09 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
php数组函数序列之in_array() - 查找数组中是否存在指定值
2011/11/07 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
只需五句话搞定JavaScript作用域(经典)
2016/07/26 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
Typescript 中的 interface 和 type 到底有什么区别详解
2019/06/18 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
Angular利用HTTP POST下载流文件的步骤记录
2020/07/26 Javascript
浅谈vue中document.getElementById()拿到的是原值的问题
2020/07/26 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
用Python计算三角函数之acos()方法的使用
2015/05/15 Python
使用Py2Exe for Python3创建自己的exe程序示例
2018/10/31 Python
Django实现学生管理系统
2019/02/26 Python
用Python批量把文件复制到另一个文件夹的实现方法
2019/08/16 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
德国最大的服装、鞋子和配件在线商店之一:Outfits24
2019/07/23 全球购物
台湾专柜女包:KINAZ
2019/12/26 全球购物
数据库测试通常都包括哪些方面
2015/11/30 面试题
教师岗位职责
2013/11/17 职场文书
办公室经理岗位职责
2014/01/01 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
求职者怎样写自荐信
2014/04/13 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
不想升级Win11?教你彻底锁定老版Windows系统的方法(附下载地址)
2022/09/23 数码科技