匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。

1  2     
      3      8     30 31 32     
     33 

上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动.

我们可以把小球封装成一个对象:

ball.js文件：

1 function Ball( x, y, r, color ){ 2     this.x = x || 0; 3     this.y = y || 0; 4     this.radius = r || 20; 5     this.color = color || '#09f'; 6 } 7 Ball.prototype = { 8     constructor : Ball, 9     stroke : function( cxt ){10         cxt.strokeStyle = this.color;11         cxt.beginPath();12         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );13         cxt.closePath();14         cxt.stroke();15     },16     fill : function( cxt ){17         cxt.fillStyle = this.color;18         cxt.beginPath();19         cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );20         cxt.closePath();21         cxt.fill();22     }23 }

该小球对象，可以定制位置半径和颜色，支持两种渲染方式（描边和填充）

1  2     
      3      8      9     23 24 25 26     
     27 

 斜线匀速运动：

1  2     
      3      8      9     24 25 26 27     
     28 

 任意方向的匀速运动（速度分解）

1  2     
      3      8      9     28 29 30     
     31