HTML5 实现小车动画效果(Canvas/CSS3/JQuery)(3)

(function(){              var car=document.createElement('canvas');    //创建元素               car.height=carHeight+axisDelta+radius;   //设置高度               car.width=carWidth;              //设置宽度               w=car.getContext('2d');           })();     

点击“Play”按钮，通过定时重复执行“画汽车”操作，来模拟“帧播放”功能：

function play(s){               //参数s是一个button               if(ani){                 //如果ani不为null，则代表我们当前已经有了一个动画                  clearInterval(ani);           //所以我们需要清除它(停止动画)                  ani=null;                                  s.innerHTML='Play';           //重命名该按钮为“播放”               }else{                 ani=setInterval(drawCanvas,40);       //我们将设置动画为25fps[帧每秒]，40/1000，即为二十五分之一                  s.innerHTML='Pause';          //重命名该按钮为“暂停”               }           }  

加速，减速，通过以下方法，改变移动距离的大小来实现：