分享一个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
;
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>