[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动 - ghostwu_H5之家

上节，我们讲了匀速运动，本节分享的运动就更有意思了：

加速运动:

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></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></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></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></canvas> 34 </body>

抛物线与重力弹跳运动