用JS实现人物走动动画效果

1、JS实现笨办法：

JS代码：
<script type="text/javascript">
//图片的预加载
var img1=new Image();
var img2=new Image();
var img3=new Image();
img1.src = "./image/nanren_zhengli2.png";//图片自己找个图片，把地址写对就成
img2.src = "./image/nanren_zhengli1.png";
img3.src = "./image/nanren_zhengli0.png";
var img=new Array(img1,img3,img2,img3);//定义数组
var imgs= new Image();
var Canvas;
var ctx;
var i=0;
var num=0;//引用函数
function Draw(){setInterval('Donghua()',100);//动画的时间控制
}//控制函数
function Donghua(){imgs=img[i];Canvas=document.getElementById('MyCanvas');ctx=Canvas.getContext('2d');//以2d的模式进行绘图ctx.clearRect(0, 0, 70, 175);//清除区域ctx.drawImage(mario, 0, num,51.48,30);//开始画图num=num+5;if(num==175)//万物有始皆有终{num=0;}if(i==4)//结束意味着重新开始{i=0;}i++;
}
</script>

html代码：

<body onload="Draw()">
<canvas id="mycanvas" width="51.48" height="175"></canvas>
</body>

用JS实现人物走动动画效果相关推荐

js进阶 13-6 jquery动画效果相关常用函数有哪些
js进阶 13-6 jquery动画效果相关常用函数有哪些一.总结一句话总结:animate(),stop(),finish(),delat()四个. 1.stop()方法的基本用法是什么(sto ...
html盒子移动动画代码,js实现盒子移动动画效果
本文实例为大家分享了js实现盒子移动动画效果的具体代码,供大家参考,具体内容如下 content="width=device-width, user-scalable=no, initial ...
babylon.js小人快跑动画效果
babylon.js小人快跑动画效果 var createScene = function () {// This creates a basic Babylon Scene object (non- ...
html5行星环绕,Two.js实现星球环绕动画效果
Two.js 是面向现代 Web 浏览器的一个二维绘图 API.Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁.本文主要介绍了基于Two ...
CSS3+JS卡通人物开车动画
下载地址 CSS3+JS卡通人物开车动画场景 dd:
js闭包-实现打字机动画效果
简介闭包就是能够读取其他函数内部变量的函数.例如在javascript中,只有函数内部的子函数才能读取局部变量,所以闭包可以理解成"定义在一个函数内部的函数".在本质上,闭包是将 ...
JS+CSS3人物奔跑动画
查看效果:http://hovertree.com/texiao/jquery/58/ 效果图: 代码: <!DOCTYPE html> <html> <head> ...
js添加到购物车动画效果实现
方法一: 用js控制购车的的位置实现原理解析: 通过js动态生成一个过度元素(就是一个可以移动的小球),并控制该元素的位置移动,从点击按钮dom元素移动到购物车的dom元素,实现添加到购物车的动态效 ...
JS实现css属性动画效果
html代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
PS制作水墨流体烟雾人物GIF动画效果
动作支持CC以上版本软件,我们需要先到陌鱼社区下载"制作水墨流体GIF动态人物效果PS动作"然后我们用这个动作即可制作出下图的一些效果. 01.打开软件,载入画笔.动作,关闭软件. ...

用JS实现人物走动动画效果

用JS实现人物走动动画效果相关推荐

最新文章

热门文章