今天看啥
    热点:

      天发国际娱乐官网:这份意见,首先提出的就是,要高度重视和持续改进对“中国制造2025”的金融支持服务。

      [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>

      www.1click-soft.comtruehttp://www.1click-soft.com/HTML5/1228883.htmlTechArticle[js高手之路]html5 canvas动画教程, 上节,我们讲了匀速运动,本节分享的运动就更有意思了: 加速运动 重力加速度 抛物线运动 摩擦力 加速...

      相关文章

        暂无相关文章
      相关搜索:

      帮客评论

      视觉看点
      百度 360 搜狗