上节，我们讲了匀速运动，本节分享的运动就更有意思了：
- 加速运动
- 重力加速度
- 抛物线运动
- 摩擦力
加速运动:
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 ????????????????vx = 0,16 ????????????????ax = 0.1;17 ????????????(function linear() {18 ????????????????oGc.clearRect(0, 0, width, height);19 ????????????????ball.fill( oGc );20 ????????????????ball.x += vx;21 ????????????????vx += ax;22 ????????????????requestAnimationFrame(linear);23 ????????????})();24 ????????}25 ????</script>26 </head>27 <body>28 ????<canvas id="canvas" width="1200" height="600"></canvas>29 </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, 0 ),15 ????????????????a = 0.3,16 ????????????????ax = a * Math.cos( 25 * Math.PI / 180 ),17 ????????????????ay = a * Math.sin( 25 * Math.PI / 180 ),18 ????????????????vx = 0,19 ????????????????vy = 0;20 ????????????(function linear() {21 ????????????????oGc.clearRect(0, 0, width, height);22 ????????????????ball.fill( oGc );23 ????????????????ball.x += vx;24 ????????????????ball.y += vy;25 ????????????????vx += ax;26 ????????????????vy += ay;27 ????????????????requestAnimationFrame(linear);28 ????????????})();29 ????????}30 ????</script>31 </head>32 <body>33 ????<canvas id="canvas" width="1200" height="600"></canvas>34 </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 / 2 ),15 ????????????????vy = -10,16 ????????????????vx = 5,17 ????????????????gravity = 0.2;18 ????????????(function linear() {19 ????????????????oGc.clearRect(0, 0, width, height);20 ????????????????ball.fill( oGc );21 ????????????????ball.y += vy;22 ????????????????ball.x += vx;23 ????????????????vy += gravity;24 ????????????????requestAnimationFrame(linear);25 ????????????})();26 ????????}27 ????</script>28 </head>29 <body>30 ????<canvas id="canvas" width="1200" height="600"></canvas>31 </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( width / 2, 20 ),15 ????????????????vy = 0,16 ????????????????gravity = 0.2,17 ????????????????bounce = -0.6;18 ????????????(function linear() {19 ????????????????oGc.clearRect(0, 0, width, height);20 ????????????????ball.fill( oGc );21 ????????????????ball.y += vy;22 ????????????????if ( ball.y > canvas.height - ball.radius ) {23 ????????????????????ball.y = canvas.height - ball.radius;24 ????????????????????vy *= bounce;25 ????????????????}26 ????????????????vy += gravity;27 ????????????????requestAnimationFrame(linear);28 ????????????})();29 ????????}30 ????</script>31 </head>32 <body>33 ????<canvas id="canvas" width="1200" height="600"></canvas>34 </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 ????????????????vy = -10,16 ????????????????vx = 5,17 ????????????????gravity = 0.2,18 ????????????????bounce = -0.8;19 ????????????(function linear() {20 ????????????????oGc.clearRect(0, 0, width, height);21 ????????????????ball.fill( oGc );22 ????????????????ball.y += vy;23 ????????????????ball.x += vx;24 ????????????????if ( ball.y > canvas.height - ball.radius ) {25 ????????????????????ball.y = canvas.height - ball.radius;26 ????????????????????vy *= bounce;27 ????????????????}28 ????????????????vy += gravity;29 ????????????????requestAnimationFrame(linear);30 ????????????})();31 ????????}32 ????</script>33 </head>34 <body>35 ????<canvas id="canvas" width="1200" height="600"></canvas>36 </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 - 20 ),15 ????????????????vx = 20, ?????????????????????????????????????16 ????????????????friction = 0.98;17 ????????????(function linear() {18 ????????????????oGc.clearRect(0, 0, width, height);19 ????????????????ball.fill( oGc );20 ????????????????ball.x += vx;21 ????????????????vx *= friction;22 ????????????????requestAnimationFrame(linear);23 ????????????})();24 ????????}25 ????</script>26 </head>27 <body>28 ????<canvas id="canvas" width="1200" height="600"></canvas>29 </body>[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动
原文地址：http://www.cnblogs.com/ghostwu/p/7642857.html