在网上看了一篇管道工玛利亚走动的图片，感觉人物走动的太生涩了，就写了一下代码改动一下：

js 代码： 

//定义数组图片集合

			var marios = new Array("image/QQ截图20141119164825.png", "image/QQ截图20141119164845.png", "image/QQ截图20141119164908.png");

			var mario = new Image();

			var canvas;

			var ctx;

			var i = -1;

			var num = 0;

			function init() {

				//alert("----------")

				setInterval("draw()", 200);

			}

			function draw() {

				i++;

				//alert(i)

				mario.src = marios[i];

				//alert(mario)

				canvas = document.getElementById("mycanvas");

				ctx = canvas.getContext("2d");

				ctx.clearRect(0, 0, 400, 100)

				ctx.drawImage(mario, num, 0);

				num += 10;

				if (num == 400) {

					num = 0;

				}

				if (i == 2) {

					i = -1;

				}

			}

html代码：

<body onload="init()">

		<canvas id="mycanvas" width="400" height="100" style="border: 1px solid #888888;"></canvas>

	</body>

图片：

     
     

js+ canvas 实现人物走动的更多相关文章

  1. [JS,Canvas]日历时钟

    [JS,Canvas]日历时钟 Html: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  2. 利用js+canvas实现的时钟效果图

    canvas+js时钟特效 运用js+canvas方面的知识完成一个时钟的效果图,再利用for循环实现指针的转动效果: <!--网页文档的声明--> <!doctype html&g ...

  3. <Win32_18>平滑的人物走动 —— 解决闪屏

    今天咋一看,发现很久没写博客了 的确,开学之后,写博客的时间越来越少了…… 今天来做一个比较实用的小应用——平滑的人物走动,同时解决常见的闪屏问题.实现透明位图 这些技术在游戏开发中是很常见的 --- ...

  4. 转 原生js canvas实现苹果电脑mac OS窗口最小化效果

    http://www.17sucai.com/pins/demo-show?id=2459 http://www.17sucai.com/pins/demo-show?id=2458  很多资料 ,前 ...

  5. js canvas游戏初级demo-躲避障碍物

    在线演示地址 http://200ok.fun:3100/html/game_demo.html 继上次js canvas游戏初级demo-上下左右移动(https://www.cnblogs.com ...

  6. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解，html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  7. chart.js & canvas

    chart.js & canvas https://www.chartjs.org/samples/latest/ https://www.chartjs.org/samples/latest ...

  8. Atitit js canvas的图像处理类库attilax总结与事业

    Atitit js canvas的图像处理类库attilax总结与事业 1.1. 脸部识别JavaScript类库Tracking.js1 1.2. AlloyImage特性1 1.3. CamanJ ...

  9. js canvas captcha

    js canvas captcha https://thejackalofjavascript.com/building-a-captcha-using-html5-canvas/ https://a ...

随机推荐

  1. 【Codeforces 105D】 Bag of mice

    [题目链接] http://codeforces.com/contest/148/problem/D [算法] 概率DP f[w][b]表示还剩w只白老鼠,b只黑老鼠,公主胜利的概率,那么 : 1. ...

  2. 10.2 Hibernate持久层

    点击项目右键->MyEclipse->Add Hibernate Capabilities 打开MyEclipse Hibernate Perspective(MyEclipse Hibe ...

  3. [JavaEE] Spring学习资源链接

    学习规划 http://forrest-lv.iteye.com/blog/1166947 SpringMVC - 框架配置 http://blog.csdn.net/ljhabc1982/artic ...

  4. 升鲜宝V2.0_杭州生鲜配送行业，升鲜宝供应链手机分拣系统使用说明_升鲜宝生鲜供应链管理系统_15382353715_余东升

    1. 系统概述 升鲜宝供应链手机分拣系统(Android版)是升鲜宝供应链管理系统的配套分拣系统,本系统适用于农副产品生鲜配送供应链企业分拣过程,在线上数据管理和线下业务管理两大方面提供解决方案,该系 ...

  5. BZOJ 1061费用流

    思路: 我们可以列出几个不等式 用y0带进去变成等式 下-上 可以消好多东西 我们发现 等式左边的加起来=0 可以把每个方程看成一个点 正->负 连边 跑费用流即可 //By SiriusRen ...

  6. 第十课： - 读取/写入Excel/Json格式数据

    第 10 课 从DataFrame到Excel 从Excel到DataFrame 从DataFrame到JSON 从JSON到DataFrame In [1]: import pandas as pd ...

  7. hdu2282 Chocolate 完美匹配 + 拆点

    题意: N个箱子排成一个圈,所有的箱子里的巧克力的数量加起来不大于N,每次可以把箱子里的巧克力向旁边的箱子转移(两个方向),问要让每个箱子里的巧克力不大于1的最小步数. 分析: 把巧克力大于1的箱子拆 ...

  8. LCA 离线的Tarjan算法 poj1330 hdu2586

    LCA问题有好几种做法,用到(tarjan)图拉算法的就有3种.具体可以看邝斌的博客.http://www.cnblogs.com/kuangbin/category/415390.html 几天的学 ...

  9. ubuntu下svn up 出现 Can't convert string from 'UTF-8' to native encoding

    root@ubuntu:/data/www# svn up svn: warning: cannot set LC_CTYPE locale svn: warning: environment var ...

  10. ML:流形学习

    很多原理性的东西需要有基础性的理解,还是篇幅过少,所以讲解的不是特别的清晰. 原文链接:http://blog.sciencenet.cn/blog-722391-583413.html 流形(man ...