今天看啥
    热点:

      天发国际娱乐官网:我们要实事求是地指出来。

      [js高手之路]html5 canvas动画教程,


      备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码.

      边界反弹:

      当小球碰到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, height / 2),
      15                 vx = Math.random() * 2 + 5,
      16                 vy = Math.random() * 2 + 5;
      17             ball.fill(oGc);
      18             ( function move(){
      19                 oGc.clearRect( 0, 0, width, height );
      20                 ball.x += vx;
      21                 ball.y += vy;
      22                 ball.fill( oGc );
      23 
      24                 if ( ball.x < ball.radius ) { //碰到左边的边界
      25                     ball.x = ball.radius;
      26                     vx = -vx;
      27                 }else if ( ball.y < ball.radius ){
      28                     ball.y = ball.radius;
      29                     vy = -vy;
      30                 }else if ( ball.x > width - ball.radius ){
      31                     ball.x = width - ball.radius;
      32                     vx = -vx;
      33                 }else if ( ball.y > height - ball.radius ){
      34                     ball.y = height - ball.radius;
      35                     vy = -vy;
      36                 }
      37                 requestAnimationFrame( move );
      38             } )();
      39         }
      40     </script>
      41 </head>
      42 
      43 <body>
      44     <canvas id="canvas" width="1200" height="600"></canvas>
      45 </body>

       原理跟之前写的文章[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                 balls = [], n = 50;
      15             function getRandColor() {
      16                 return '#' + (function (color) {
      17                     return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : arguments.callee(color);
      18                 })('');
      19             }
      20             for (var i = 0; i < n; i++) {
      21                 var ball = new Ball(width / 2, height / 2, 20, getRandColor());
      22                 ball.vx = (Math.random() * 2 - 1) * 5;
      23                 ball.vy = (Math.random() * 2 - 1) * 5;
      24                 balls.push(ball);
      25             }
      26             (function move() {
      27                 oGc.clearRect(0, 0, width, height);
      28                 balls.forEach(function (ball) {
      29                     ball.x += ball.vx;
      30                     ball.y += ball.vy;
      31                     ball.fill(oGc);
      32 
      33                     if (ball.x < ball.radius) { //碰到左边的边界
      34                         ball.x = ball.radius;
      35                         ball.vx = -ball.vx;
      36                     } else if (ball.y < ball.radius) {
      37                         ball.y = ball.radius;
      38                         ball.vy = -ball.vy;
      39                     } else if (ball.x > width - ball.radius) {
      40                         ball.x = width - ball.radius;
      41                         ball.vx = -ball.vx;
      42                     } else if (ball.y > height - ball.radius) {
      43                         ball.y = height - ball.radius;
      44                         ball.vy = -ball.vy;
      45                     }
      46                 });
      47                 requestAnimationFrame(move);
      48             })();
      49         }
      50     </script>
      51 </head>
      52 
      53 <body>
      54     <canvas id="canvas" width="1200" height="600"></canvas>
      55 </body>

      原理是一样的,只是把坐标和速度的判断,基于一个个小球对象.

       


      www.1click-soft.comtruehttp://www.1click-soft.com/HTML5/1228986.htmlTechArticle[js高手之路]html5 canvas动画教程, 备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运...

      相关文章

        暂无相关文章
      相关搜索:

      帮客评论

      视觉看点
      百度 360 搜狗