<canvas id="canvas1" width="250" height="300" style="background-color:black"> 你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 </canvas><br/> 帧数：<input id="txt1" type="text" value="25"/><br/> 每次移动距离：<input type="text" id="txt2" value="10"/><br/> <input type="button" value="开始" onclick="move_box()"/> <input type="button" value="暂停" onclick="stop()"/> <script type="text/javascript"> //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //=================================================================== //基本动画 //==================================================================== function move_box(){ //停止动画 stop(); //移动速度 var delta=parseInt(document.getElementById('txt1').value); //每秒绘制多少次 var fps=parseInt(document.getElementById('txt2').value); //画布对象 var canvas=document.getElementById("canvas1") //获取上下文对象 var ctx = canvas.getContext("2d"); //设置颜色 ctx.fillStyle="red"; //方块的初始位置 var x=100;var y=50; //方块的长度和宽度 var w=30;var h=30; //开始动画 interval = setInterval(function(){ //改变 y 坐标 y=y+delta; //上边缘检测 if(y<0){ y=0; delta=-delta; } //下边缘检测 if((y+h)>canvas.getAttribute("height")){ y=canvas.getAttribute("height")-h; delta=-delta; } //清空画布 ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); //保存状态 ctx.save(); //移动坐标 ctx.translate(x,y); //重新绘制 ctx.fillRect(0,0,w,h); //恢复状态 ctx.restore(); },1000/fps); } </script>

你还可修改部分代码再运行看看哦

<canvas id="canvas2" width="250" height="300" style="background-color:black"> 你的浏览器不支持 Canvas 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 </canvas><br/> <input type="button" value="开始" onclick="move_box2()"/> <input type="button" value="暂停" onclick="stop()"/> <script type="text/javascript"> //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //=================================================================== //重新组织代码 //==================================================================== //方块的构造函数 function Box(color,x,y,w,h,delta){ this.color=color; this.x=x; this.y=y; this.w=w; this.h=h; this.delta=delta; //三十帧 this.fps=30; //每一帧的延迟时间 this.delay=1000/this.fps; //上一次重绘的时间 this.last_update=0; } //方块更新 Box.prototype.update=function(canvas){ //获取当前时间 var now=(new Date()).getTime(); //如果达到了延迟时间，则更新数据 if((now-this.last_update)>this.delay){ //改变 y 坐标 this.y=this.y+this.delta; //上边缘检测 if(this.y<0){ this.y=0; this.delta=-this.delta; } //下边缘检测 if((this.y+this.h)>canvas.getAttribute("height")){ this.y=canvas.getAttribute("height")-this.h; this.delta=-this.delta; } //记下最新一次绘制时间 this.last_update=now; } } function move_box2(){ //停止动画 stop(); //画布对象 var canvas=document.getElementById("canvas2") //获取上下文对象 var ctx = canvas.getContext("2d"); //清空画布 ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); //创建多个方块对象 var boxes=[]; boxes[0]= new Box("red",3,2,10,35,2,10);//速度10 boxes[1]= new Box("blue",60,28,44,15,5);//速度20 boxes[2]= new Box("green",130,200,23,18,10);//速度30 boxes[3]= new Box("pink",200,150,35,10,20);//速度40 //开始动画绘制 interval = setInterval(function(){ for(var i=0;i<boxes.length;i++){ //取出一个方块 var box=boxes[i]; //清空这个方块 ctx.clearRect(box.x,box.y,box.w,box.h); //更新数据 box.update(canvas); //保存状态 ctx.save(); //设置颜色 ctx.fillStyle=box.color; //移动坐标 ctx.translate(box.x,box.y); //重新绘制 ctx.fillRect(0,0,box.w,box.h); //恢复状态 ctx.restore(); } },1);//尽可能快的循环 } </script>

你还可修改部分代码再运行看看哦

<canvas id="canvas3" width="250" height="300" style="background-color:black"> 你的浏览器不支持 &lt;canvas&gt;标签，请使用 Chrome 浏览器 或者 FireFox 浏览器 </canvas><br/> 帧数：<input id="txt4" type="text" value="10"/><br/> 速度：<input type="text" id="txt5" value="5"/><br/> 比例：<input type="text" id="txt6" value="2"/><br/> <input type="button" value="开始" onclick="animate()"/> <input type="button" value="暂停" onclick="stop()"/> <script type="text/javascript"> //定时器 var interval=null; //停止动画 function stop(){ clearInterval(interval); } //=================================================================== //精灵登场 //==================================================================== //每一帧在大图中的位置 var frames=[]; frames[0]=[0,4,19,19]; frames[1]=[22,1,24,19]; frames[2]=[49,0,18,17]; frames[3]=[1,32,18,17]; frames[4]=[22,33,24,19]; frames[5]=[49,36,19,19]; //精灵类 function Sprite(dx,dy,delta,fps){ this.dx=dx; this.dy=dy; this.fps=fps; this.delay=1000/fps; this.last_update=0; //移动速度 this.delta=-delta; //帧编号 this.index=0; //方向 this.dir_left=true; } Sprite.prototype.update=function(canvas){ //获取当前时间 var now=(new Date()).getTime(); if((now-this.last_update)>this.delay){ if(this.dir_left){ //方向朝左,只绘制0 1 2帧 if(this.index>2) this.index=0; } else{ //方向朝右,只绘制 3 4 5 帧 if(this.index>5) this.index=3; } //取出当前帧的坐标 this.frame=frames[this.index]; //当前帧在大图中的位置 this.sx=this.frame[0]; this.sy=this.frame[1]; this.sw=this.frame[2]; this.sh=this.frame[3]; //当前帧大小 this.dw=this.frame[2]; this.dh=this.frame[3]; //改变 x 坐标 this.dx=this.dx+this.delta; //左边缘检测 if(this.dx<0){ this.dx=0; //转向 this.delta=-this.delta; this.dir_left=false; this.index=3; } //右边缘检测 if((this.dx+this.dw)>canvas.getAttribute("width")){ this.dx=canvas.getAttribute("width")-this.dw; //转向 this.delta=-this.delta; this.dir_left=true; this.index=0; } this.dy=this.dy;//y 不移动 this.index++; this.last_update=now; } } function animate(){ //停止动画 stop(); //移动速度 var delta=parseInt(document.getElementById('txt4').value); //每秒绘制多少次 var fps=parseInt(document.getElementById('txt5').value); //比例 var scale=parseInt(document.getElementById('txt6').value); //画布对象 var canvas=document.getElementById("canvas3") //获取上下文对象 var ctx = canvas.getContext("2d"); //清空画布 ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); var img=new Image(); img.src="http://www.crazyfrom.com/images/2010/10/sprite.gif"; var sprite=new Sprite(120,150,delta,fps); interval = setInterval(function(){ //清空画布 ctx.clearRect(0,0,canvas.getAttribute("width"),canvas.getAttribute("height")); //更新数据 sprite.update(canvas); //保存状态 ctx.save(); //移动坐标 ctx.translate(sprite.dx,sprite.dy); ctx.scale(scale,scale); ctx.drawImage(img,sprite.sx,sprite.sy,sprite.sw,sprite.sh,0,0,sprite.dw,sprite.dh); //恢复状态 ctx.restore(); },1); } </script>

你还可修改部分代码再运行看看哦