zoukankan      html  css  js  c++  java

  • [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>
  • 相关阅读:
    ReentrantLock的实现语义与使用场景
    队列同步器详解
    设计模式--模板方法模式
    Synchronized及其实现原理
    JAVA线程基础
    JAVA内存模型
    java 线上问题定位工具
    JMX超详细解读
    Hexo
    [转]html5 video在安卓大部分浏览器包括微信最顶层的问题
  • 原文地址：https://www.cnblogs.com/ghostwu/p/7642857.html
Copyright © 2011-2022 走看看