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

function speed(delta){              var newRate=Math.max(rate+delta,0.1);              dx=newRate/rate*dx;              rate=newRate;           }  

页面加载的初始化方法：

//init                function init(){              c=document.getElementById('canvas').getContext('2d');              drawCanvas();           }  

主调方法：

function drawCanvas(){              c.clearRect(0,0,c.canvas.width, c.canvas.height);    //清除Canvas(已显示的)，避免产生错误               c.save();                        //保存当前坐标值以及状态，对应的类似“push”操作                  drawGrass();                     //画背景               c.translate(carX,0);                 //移动起点坐标               drawCar();                       //画汽车(隐藏的canvas)               c.drawImage(w.canvas,0,carY);            //画最终显示的汽车               c.restore();                     //恢复Canvas的状态，对应的是类似“pop”操作               carX+=dx;                        //重置汽车在X轴方向的位置，以模拟向前走               carAlpha+=dx/radius;                 //按比例增加轮胎角度                  if(carX>c.canvas.width){              //设置某些定期的边界条件                  carX=-carWidth-10;                //也可以将速度反向为dx*=-1;               }           }  

画背景：