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

最新推荐文章于 2023-09-11 13:43:27 发布

「已注销」

最新推荐文章于 2023-09-11 13:43:27 发布

阅读量410

点赞数 1

分类专栏：前端文章标签： html5 加速运动抛物线重力摩擦力

原文链接：https://www.mk2048.com/blog/blog.php?id=hbjc1khahicb&title=%5Bjs%E9%AB%98%E6%89%8B%E4%B9%8B%E8%B7%AF%5Dhtml5+canvas%E5%8A%A8%E7%94%BB%E6%95%99%E7%A8%8B+-+%E9%87%8D%E5%8A%9B%E3%80%81%E6%91%A9%E6%93%A6%E5%8A%9B%E3%80%81%E5%8A%A0%E9%80%9F%E3%80%81%E6%8A%9B%E

版权

前端专栏收录该内容

182 篇文章 0 订阅

订阅专栏

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

加速运动
重力加速度
抛物线运动
摩擦力

加速运动:

 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>

「已注销」

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
[js高手之路]html5 canvas动画教程 - 重力、摩擦力、加速、抛物线运动

上节，我们讲了匀速运动，本节分享的运动就更有意思了：加速运动重力加速度抛物线运动摩擦力加速运动: 1 <head> 2 <meta charset='utf-8' /> 3...
复制链接

扫一扫