[js高手之路]html5 canvas动画教程 - 重力摩擦力加速抛物线运动
Posted ghostwu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[js高手之路]html5 canvas动画教程 - 重力摩擦力加速抛物线运动相关的知识，希望对你有一定的参考价值。
上节，我们讲了匀速运动，本节分享的运动就更有意思了：
- 加速运动
- 重力加速度
- 抛物线运动
- 摩擦力
加速运动:
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动画教程 - 重力摩擦力加速抛物线运动的主要内容，如果未能解决你的问题，请参考以下文章
[js高手之路]html5 canvas动画教程 - 下雪效果
[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
[js高手之路] html5 canvas动画教程 - 匀速运动
[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)