日期：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>

總結

以上是生活随笔為你收集整理的分享一个HTML5画布实现的超酷文字弹跳球效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。