分享一个HTML5画布实现的超酷文字弹跳球效果
日期：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));//Bballs.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)); // nballs.push(new Ball(310, 135, 0, 0, red));balls.push(new Ball(310, 130, 0, 0, red));balls.push(new Ball(310, 120, 0, 0, red));balls.push(new Ball(310, 110, 0, 0, red));balls.push(new Ball(310, 100, 0, 0, red));balls.push(new Ball(320, 95, 0, 0, red));balls.push(new Ball(330, 95, 0, 0, red));balls.push(new Ball(340, 100, 0, 0, red));balls.push(new Ball(340, 110, 0, 0, red));balls.push(new Ball(340, 120, 0, 0, red));balls.push(new Ball(340, 130, 0, 0, red));balls.push(new Ball(340, 135, 0, 0, red)); // 1balls.push(new Ball(368, 135, 0, 0, green));balls.push(new Ball(374, 135, 0, 0, green)); balls.push(new Ball(382, 135, 0, 0, green));balls.push(new Ball(374, 129, 0, 0, green));balls.push(new Ball(374, 119, 0, 0, green));balls.push(new Ball(374, 109, 0, 0, green));balls.push(new Ball(374, 99, 0, 0, green));balls.push(new Ball(374, 89, 0, 0, green));balls.push(new Ball(365, 94, 0, 0, green));balls.push(new Ball(470, 89, 0, 0, dark));balls.push(new Ball(440, 89, 0, 0, dark));balls.push(new Ball(430, 115, 0, 0, red));balls.push(new Ball(435, 119, 0, 0, red));balls.push(new Ball(440, 125, 0, 0, red));balls.push(new Ball(450, 129, 0, 0, red));balls.push(new Ball(460, 129, 0, 0, red));balls.push(new Ball(470, 125, 0, 0, red));balls.push(new Ball(475, 119, 0, 0, red));balls.push(new Ball(480, 114, 0, 0, red)); return balls; } function getMousePos(canvas, evt){ // get canvas position var obj = canvas; var top = 0; var left = 0; while (obj.tagName != 'BODY') { top += obj.offsetTop; left += obj.offsetLeft; obj = obj.offsetParent; } // return relative mouse position var mouseX = evt.clientX - left + window.pageXOffset; var mouseY = evt.clientY - top + window.pageYOffset; return { x: mouseX, y: mouseY }; } function updateBalls(canvas, balls, timeDiff, mousePos){ var context = canvas.getContext("2d"); var collisionDamper = 0.3; var floorFriction = 0.0005 * timeDiff; var mouseForceMultiplier = 1 * timeDiff; var restoreForce = 0.002 * timeDiff; for (var n = 0; n < balls.length; n++) { var ball = balls[n]; // set ball position based on velocity ball.y += ball.vy; ball.x += ball.vx; // restore forces if (ball.x > ball.origX) { ball.vx -= restoreForce; } else { ball.vx += restoreForce; } if (ball.y > ball.origY) { ball.vy -= restoreForce; } else { ball.vy += restoreForce; } // mouse forces var mouseX = mousePos.x; var mouseY = mousePos.y; var distX = ball.x - mouseX; var distY = ball.y - mouseY; var radius = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2)); var totalDist = Math.abs(distX) + Math.abs(distY); var forceX = (Math.abs(distX) / totalDist) * (1 / radius) * mouseForceMultiplier; var forceY = (Math.abs(distY) / totalDist) * (1 / radius) * mouseForceMultiplier; if (distX > 0) { // mouse is left of ball ball.vx += forceX; } else { ball.vx -= forceX; } if (distY > 0) { // mouse is on top of ball ball.vy += forceY; } else { ball.vy -= forceY; } // floor friction if (ball.vx > 0) { ball.vx -= floorFriction; } else if (ball.vx < 0) { ball.vx += floorFriction; } if (ball.vy > 0) { ball.vy -= floorFriction; } else if (ball.vy < 0) { ball.vy += floorFriction; } // floor condition if (ball.y > (canvas.height - ball.radius)) { ball.y = canvas.height - ball.radius - 2; ball.vy *= -1; ball.vy *= (1 - collisionDamper); } // ceiling condition 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>?