您的位置：首页 > Web前端 > JavaScript

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

2017-09-03 14:15 387 查看
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript 动画 图片
相关文章推荐
新的分享
章节导航