[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>
posted @ 2017-10-09 20:34  ghostwu  阅读(2740)  评论(0)  编辑  收藏  举报
Copyright ©2017 ghostwu