canvas动画气球

            canvas小球的动画

我用canvas画布实现的小球动画效果，可以参考下

我用canvas画布实现的小球动画效果，可以参考下

我用canvas画布实现的小球动画效果，可以参考下

我用canvas画布实现的小球动画效果，可以参考下

我用canvas画布实现的小球动画效果，可以参考下


js是面向对象写的

步骤：
先写好封装的函数
Random 随机数

suanzi是小球碰撞后运行方向

dong是canvas画的随机圆
·························································································································
再去new这个构造函数，我一次性for循环new200个球，多少都可以,canvas性能可以的，换js写就会卡炸

弄个定时器，随便时间，setInterval.每次执行清除画布，再重构重新200个球，就有换球的效果了，看上去球就动了

每次都是canvas画的球，所以没有DOM，不会卡顿，性能杠杠的，有兴趣的可以试试吧

细节可以看代码：

1 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <canvas id="wa" width="800" height="400"></canvas>

 </body>

 </html>

 <script>

     var hb = wa.getContext('2d');

     var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'];

         var hb=wa.getContext('2d');

     function Random(max, min) {

         return parseInt(Math.random() * (max - min) + min)

     }

     function Run() {

         var r = Random(40, 20);

         this.x = Random(wa.width - r, r);

         this.y = Random(wa.height - r, r);

         this.z = r;

         this.c = 'rgba(' + Random(255, 0) + ',' + Random(255, 0) + ',' + Random(255, 0) + ',' + Math.random().toFixed(1) + ')';

         this.speedx = Random(10, -10);

         this.speedy = Random(5, -5)

     }

     Run.prototype.suanzi = function () {

         if (this.speedx == 0) {

             this.speedx = 6;

         }

         if (this.speedy == 0) {

             this.speedy = -4;

         }

         if (this.x < this.z || wa.width - this.z < this.x) {

             this.speedx *= -1;

         }

         if (this.y < this.z || wa.height - this.z < this.y) {

             this.speedy *= -1;

         }

         this.x += this.speedx;

         this.y += this.speedy;

     };

     Run.prototype.dong = function () {

         hb.beginPath();

         hb.arc(this.x, this.y, this.z, 0, Math.PI * 2);

         hb.fillStyle = this.c;

         hb.fill();

         hb.closePath();

     };

     var palys = [];

     for (var i = 0; i < 200; i++) {

         var play = new Run();

         play.dong();

         palys.push(play);

     }

     setInterval(function () {

         hb.clearRect(0, 0, wa.width, wa.height);

         for (var j = 0; j < palys.length; j++) {

             palys[j].suanzi();

             palys[j].dong();

             console.log(palys[0])

         }

     }, 10);

 </script>

巴特西

canvas动画气球

最新文章

热门文章