日期：2012/03/05

 

今天我们分享一个来自于的超酷弹跳球效果，这里我们使用纯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);             };