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

function drawGrass(){              //创建线性渐变，前两个参数为渐变开始点坐标，后两个为渐变结束点坐标               var grad=c.createLinearGradient(0,c.canvas.height-grassHeight,0,c.canvas.height);              //为线性渐变指定渐变色，0表示渐变起始色，1表示渐变终止色               grad.addColorStop(0,'#33CC00');              grad.addColorStop(1,'#66FF22');              c.fillStyle=grad;              c.lineWidth=0;              c.fillRect(0,c.canvas.height-grassHeight,c.canvas.width,grassHeight);                         }  

画车身：

function drawCar(){              w.clearRect(0,0,w.canvas.width,w.canvas.height);     //清空隐藏的画板               w.strokeStyle='#FF6600';                 //设置边框色               w.lineWidth=2;                       //设置边框的宽度，单位为像素               w.fillStyle='#FF9900';                   //设置填充色               w.beginPath();                       //开始绘制新路径               w.rect(0,0,carWidth,carHeight);              //绘制一个矩形               w.stroke();                          //画边框               w.fill();                            //填充背景               w.closePath();                       //关闭绘制的新路径               drawTire(tiresDelta+radius,carHeight+axisDelta);     //我们开始画第一个轮子               drawTire(carWidth-tiresDelta-radius,carHeight+axisDelta);    //同样的，第二个                          }  

画轮胎：