匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。
1 <head> 2 ????<meta charset=‘utf-8‘ /> 3 ????<style> 4 ????????#canvas { 5 ????????????border: 1px dashed #aaa; 6 ????????} 7 ????</style> 8 ????<script> 9 ????????window.onload = function () {10 ????????????var oCanvas = document.querySelector("#canvas"),11 ????????????????oGc = oCanvas.getContext(‘2d‘),12 ????????????????width = oCanvas.width, height = oCanvas.height,13 ????????????????x = 0;14 ????????????function drawBall( x, y, cxt ){15 ????????????????cxt.fillStyle = ‘#09f‘;16 ????????????????cxt.beginPath();17 ????????????????cxt.arc( x, y, 20, 0, 2 * Math.PI );18 ????????????????cxt.closePath();19 ????????????????cxt.fill();20 ????????????}21 ????????????( function linear(){22 ????????????????oGc.clearRect( 0, 0, width, height );23 ????????????????drawBall( x, height / 2, oGc );24 ????????????????x += 2;25 ????????????????console.log( x );26 ????????????????requestAnimationFrame( linear );27 ????????????} )();28 ????????}29 ????</script>30 </head>31 <body>32 ????<canvas id="canvas" width="1200" height="600"></canvas>33 </body>上述实例让一个半径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 <head> 2 ????<meta charset=‘utf-8‘ /> 3 ????<style> 4 ????????#canvas { 5 ????????????border: 1px dashed #aaa; 6 ????????} 7 ????</style> 8 ????<script src="./ball.js"></script> 9 ????<script>10 ????????window.onload = function () {11 ????????????var oCanvas = document.querySelector("#canvas"),12 ????????????????oGc = oCanvas.getContext(‘2d‘),13 ????????????????width = oCanvas.width, height = oCanvas.height,14 ????????????????ball = new Ball( 0, height / 2 );15 ????????????(function linear() {16 ????????????????oGc.clearRect(0, 0, width, height);17 ????????????????ball.fill( oGc );18 ????????????????ball.x += 2;19 ????????????????requestAnimationFrame(linear);20 ????????????})();21 ????????}22 ????</script>23 </head>24 25 <body>26 ????<canvas id="canvas" width="1200" height="600"></canvas>27 </body>斜线匀速运动：
1 <head> 2 ????<meta charset=‘utf-8‘ /> 3 ????<style> 4 ????????#canvas { 5 ????????????border: 1px dashed #aaa; 6 ????????} 7 ????</style> 8 ????<script src="./ball.js"></script> 9 ????<script>10 ????????window.onload = function () {11 ????????????var oCanvas = document.querySelector("#canvas"),12 ????????????????oGc = oCanvas.getContext(‘2d‘),13 ????????????????width = oCanvas.width, height = oCanvas.height,14 ????????????????ball = new Ball( 0, height );15 ????????????(function linear() {16 ????????????????oGc.clearRect(0, 0, width, height);17 ????????????????ball.fill( oGc );18 ????????????????ball.x += 2;19 ????????????????ball.y -= 1;20 ????????????????requestAnimationFrame(linear);21 ????????????})();22 ????????}23 ????</script>24 </head>25 26 <body>27 ????<canvas id="canvas" width="1200" height="600"></canvas>28 </body>[js高手之路] html5 canvas动画教程 - 匀速运动
原文地址：http://www.cnblogs.com/ghostwu/p/7638492.html