[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动 - ghostwu(2)_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 ), 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></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></canvas> 29 </body>