分享一个HTML5画布实现的超酷文字弹跳球效果

日期：2012/03/05

在线演示  本地下载

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

                    if (ball.y < (ball.radius)) {
                        ball.y = ball.radius + 2;
                        ball.vy *= -1;
                        ball.vy *= (1 - collisionDamper);
                    }
                    
                    // right wall condition
                    if (ball.x > (canvas.width - ball.radius)) {
                        ball.x = canvas.width - ball.radius - 2;
                        ball.vx *= -1;
                        ball.vx *= (1 - collisionDamper);
                    }
                    
                    // left wall condition
                    if (ball.x < (ball.radius)) {
                        ball.x = ball.radius + 2;
                        ball.vx *= -1;
                        ball.vx *= (1 - collisionDamper);
                    }
                }
            }
            
            function Ball(x, y, vx, vy, color){
                this.x = x;
                this.y = y;
                this.vx = vx;
                this.vy = vy;
                this.color = color;
                this.origX = x;
                this.origY = y;
                this.radius = 10;
            }
            
            function animate(canvas, balls, lastTime, mousePos){
                var context = canvas.getContext("2d");
                
                // update
                var date = new Date();
                var time = date.getTime();
                var timeDiff = time - lastTime;
                updateBalls(canvas, balls, timeDiff, mousePos);
                lastTime = time;
                
                // clear
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // render
                for (var n = 0; n < balls.length; n++) {
                    var ball = balls[n];
                    context.beginPath();
                    context.arc(ball.x, ball.y, ball.radius, 0, 2 * Math.PI, false);
                    context.fillStyle = ball.color;
                    context.fill();
                }
                
                // request new frame
                requestAnimFrame(function(){
                    animate(canvas, balls, lastTime, mousePos);
                });
            }
            
            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var balls = initBalls();
                var date = new Date();
                var time = date.getTime();
                /*
                 * set mouse position really far away
                 * so the mouse forces are nearly obsolete
                 */
                var mousePos = {
                    x: 9999,
                    y: 9999
                };
                
                canvas.addEventListener("mousemove", function(evt){
                    var pos = getMousePos(canvas, evt);
                    mousePos.x = pos.x;
                    mousePos.y = pos.y;
                });
                
                canvas.addEventListener("mouseout", function(evt){
                    mousePos.x = 9999;
                    mousePos.y = 9999;
                });
                
                animate(canvas, balls, time, mousePos);
            };
        </script>