HTML5 Canvas Google Bouncing Balls

by 亮 薛

HTML

<canvas id="myCanvas" width="578" height="200"></canvas>

CSS

body {
        margin: 0px;
        padding: 0px;
      }

JavaScript

window.requestAnimFrame = (function(callback) {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
          function(callback) {
            window.setTimeout(callback, 1000 / 60);
          };
      })();

      function initBalls() {
        balls = [];

        var blue = '#3A5BCD';
        var red = '#EF2B36';
        var yellow = '#FFC636';
        var green = '#02A817';

        // G
        balls.push(new Ball(173, 63, 0, 0, blue));
        balls.push(new Ball(158, 53, 0, 0, blue));
        balls.push(new Ball(143, 52, 0, 0, blue));
        balls.push(new Ball(130, 53, 0, 0, blue));
        balls.push(new Ball(117, 58, 0, 0, blue));
        balls.push(new Ball(110, 70, 0, 0, blue));
        balls.push(new Ball(102, 82, 0, 0, blue));
        balls.push(new Ball(104, 96, 0, 0, blue));
        balls.push(new Ball(105, 107, 0, 0, blue));
        balls.push(new Ball(110, 120, 0, 0, blue));
        balls.push(new Ball(124, 130, 0, 0, blue));
        balls.push(new Ball(139, 136, 0, 0, blue));
        balls.push(new Ball(152, 136, 0, 0, blue));
        balls.push(new Ball(166, 136, 0, 0, blue));
        balls.push(new Ball(174, 127, 0, 0, blue));
        balls.push(new Ball(179, 110, 0, 0, blue));
        balls.push(new Ball(166, 109, 0, 0, blue));
        balls.push(new Ball(156, 110, 0, 0, blue));

        // O
        balls.push(new Ball(210, 81, 0, 0, red));
        balls.push(new Ball(197, 91, 0, 0, red));
        balls.push(new Ball(196, 103, 0, 0, red));
        balls.push(new Ball(200, 116, 0, 0, red));
        balls.push(new Ball(209, 127, 0, 0, red));
        balls.push(new Ball(223, 130, 0, 0, red));
        balls.push(new Ball(237, 127, 0, 0, red));
        balls.push(new Ball(244, 114, 0, 0, red));
        balls.push(new Ball(242, 98, 0, 0, red));
        balls.push(new Ball(237, 86, 0, 0, red));
       ...