日期：2012/03/05? 来源： 分享一个HTML5画布实现的超酷文字弹跳球效果

?

?

在线演示 ? 本地下载

?

今天我们分享一个来自于html5canvastutorials 的超酷弹跳球效果，这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体，如果你的鼠标逼近这些小球，它们会四散而逃，当你的鼠标离开后，它们又自动复原，效果很酷，希望大家喜欢！

?

      <script>
            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 dark = "#202020";
                var red = "#EF2B36";
                var blue = "#2B99E6";
                var green = "#02A817";
                
                //G
                balls.push(new Ball(173, 63, 0, 0, dark));
                balls.push(new Ball(158, 53, 0, 0, dark));
                balls.push(new Ball(143, 52, 0, 0, dark));
                balls.push(new Ball(130, 53, 0, 0, dark));
                balls.push(new Ball(117, 58, 0, 0, dark));
                balls.push(new Ball(110, 70, 0, 0, dark));
                balls.push(new Ball(102, 82, 0, 0, dark));
                balls.push(new Ball(104, 96, 0, 0, dark));
                balls.push(new Ball(105, 107, 0, 0, dark));
                balls.push(new Ball(110, 120, 0, 0, dark));
                balls.push(new Ball(124, 130, 0, 0, dark));
                balls.push(new Ball(139, 136, 0, 0, dark));
                balls.push(new Ball(152, 136, 0, 0, dark));
                balls.push(new Ball(166, 136, 0, 0, dark));
                balls.push(new Ball(174, 127, 0, 0, dark));
                balls.push(new Ball(179, 110, 0, 0, dark));
                balls.push(new Ball(166, 109, 0, 0, dark));
                balls.push(new Ball(156, 110, 0, 0, dark));

				//B
				balls.push(new Ball(248, 125, 0, 0, dark));
				balls.push(new Ball(246, 120, 0, 0, dark));
				balls.push(new Ball(245, 110, 0, 0, dark));
				balls.push(new Ball(235, 100, 0, 0, dark));
				balls.push(new Ball(220, 90, 0, 0, dark));
				balls.push(new Ball(235, 90, 0, 0, dark));
				balls.push(new Ball(240, 90, 0, 0, dark));
				balls.push(new Ball(245, 85, 0, 0, dark));
				balls.push(new Ball(250, 75, 0, 0, dark));
				balls.push(new Ball(245, 65, 0, 0, dark));
				balls.push(new Ball(235, 55, 0, 0, dark));
				balls.push(new Ball(225, 53, 0, 0, dark));
				balls.push(new Ball(215, 51, 0, 0, dark));
				balls.push(new Ball(200, 51, 0, 0, dark));
				balls.push(new Ball(200, 61, 0, 0, dark));
				balls.push(new Ball(200, 71, 0, 0, dark));
                balls.push(new Ball(200, 81, 0, 0, dark));
                balls.push(new Ball(200, 91, 0, 0, dark));
                balls.push(new Ball(200, 103, 0, 0, dark));
                balls.push(new Ball(200, 116, 0, 0, dark));
                balls.push(new Ball(200, 127, 0, 0, dark));
                balls.push(new Ball(223, 135, 0, 0, dark));
				balls.push(new Ball(210, 135, 0, 0, dark));	
				balls.push(new Ball(235, 135, 0, 0, dark));				
				balls.push(new Ball(240, 132, 0, 0, dark));				
      
                // i
                var oOffset = 67;
				balls.push(new Ball(oOffset + 210, 136, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 133, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 123, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 113, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 108, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 101, 0, 0, blue));
				balls.push(new Ball(oOffset + 210, 70, 0, 0, blue));

                // n