www.88bifa.com:抛物线运动,js高手之路

加速移动:

[js高手之路]ca88手机版 ,html伍 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>

www.88bifa.com:抛物线运动,js高手之路。摩擦力运动

 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>

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( 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 / 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, 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 / 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>

抛物线与引力弹跳运动