日期：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));
//B
balls.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));
// n
balls.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));
// 1
balls.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>
分享到：
相关推荐
今天我们分享一个来超酷弹跳球效果，这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体，如果你的鼠标逼近这些小球，它们会四散而逃，当你的鼠标离开后，它们又自动复原，效果很酷，...
当球碰到画布边缘时，它的速度会在X或Y轴上反转，从而实现弹跳效果。`requestAnimationFrame`函数用于平滑地在每一帧之间绘制动画，使得动画看起来更加流畅。 此外，你可以根据需要扩展这个基本示例，例如添加更多...
在本资源"html5基于canvas画布里面圆球弹跳动画效果源码.zip"中，主要涉及到的核心知识点是HTML5的Canvas API以及如何利用它来实现动态的圆球弹跳动画效果。 Canvas是HTML5的一个重要组成部分，它提供了一个二维的...
这个项目中，我们利用HTML5的Canvas API来创建一个可视化的场景，用JavaScript来控制一个小球在画布上进行弹跳运动。下面将详细介绍这个项目涉及的关键知识点。 1. HTML5 Canvas API： HTML5 Canvas是网页中用于...
在这个"html5酷炫3D球形文字云动画特效"中，主要运用了HTML5的Canvas元素来实现一个引人注目的视觉效果。 Canvas是HTML5中的一个画布标签，通过JavaScript可以进行动态图形绘制。在这个3D球形文字云动画中，开发者...
首先，Canvas是一个基于矢量图形的画布，可以通过JavaScript API来控制，进行各种图形的绘制，如线条、矩形、圆形、图像等。在这个项目中，我们将主要关注如何绘制一个动态的小球，并让它在Canvas上进行弹跳运动。 ...
用HTML5的画布结合JQUERY以及CSS3.0的翻转制作的时钟，可以随时和系统时间保持一致，包括随时刷新也不影响
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行图形绘制，创造出丰富的交互式用户体验...这个压缩包中的代码示例将提供一个实际操作的起点，帮助你深入理解并掌握HTML5 Canvas动态文字特效的实现。
其中，`<canvas>`元素是一个非常重要的特性，它允许开发者在网页上进行动态图形绘制，从而实现丰富的视觉效果。本教程将深入探讨如何使用HTML5的canvas画布来创建一个小球回弹的动画。 首先，我们需要在HTML文件中...
在VB6.0编程环境中，实现一个弹跳小球的例子是一项常见的练习，它涉及到了图形用户界面（GUI）编程和物理模拟的基本概念。这个例子旨在帮助开发者理解和掌握如何在Visual Basic 6.0中创建动态图像，以及如何通过编程...
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图形绘制，创造出丰富的交互式用户体验。本文将深入探讨如何利用HTML5 Canvas实现液体波浪动画效果。 首先，我们要了解Canvas的基本用法。...
在JavaScript前端开发中，画布（Canvas）是一个强大的工具，可以用于创建丰富的动态图形和动画。本示例中，我们探讨的主题是“js前端画布实现动画小球自由落体”，这涉及到JavaScript基础、HTML5 Canvas API以及基本...
这个“html5 canvas画布例子”是一个连线游戏，它利用了Canvas API来创建交互式的游戏体验。下面我们将深入探讨HTML5 Canvas的基本概念、API以及在这个连线游戏中可能涉及的技术点。 首先，HTML5 Canvas是一个基于...
二次贝塞尔曲线需要两个控制点和一个结束点，而三次贝塞尔曲线则需要三个控制点和一个结束点。这些点决定了曲线的弯曲程度和方向。 在线刻字的过程中，首先需要在SVG编辑器中手绘出期望的曲线路径。SVG（Scalable ...
对于初学者来说，这个弹跳球游戏源码提供了一个很好的实践机会，可以深入理解Processing的基本语法，学习如何创建和更新游戏对象，以及处理用户输入和碰撞检测。通过分析和修改源码，可以进一步提升编程技能和游戏...
"HTML5实现粒子效果的文字"是一个利用HTML5的Canvas API创建的独特项目，它将文字与动态粒子效果相结合，为网页增添了生动有趣的视觉体验。在这个项目中，我们将深入探讨HTML5 Canvas以及如何用它来构建粒子效果的...
总的来说，"HTML5 SVG实现超酷打击乐器特效"这个项目展示了HTML5、SVG、CSS、JavaScript和jQuery的综合运用，创造出一个富有创意和交互性的网页应用。通过学习和分析这个项目，开发者可以深入理解这些技术在实际项目...
html5画布实现的成三棋,供大家一起共同分享学习。
首先，HTML5的新特性之一是Canvas元素，这是一个二维绘图画布，允许开发者通过JavaScript动态绘制图形。在这个水滴效果中，Canvas就是核心工具。开发者可以利用Canvas API提供的方法，如`fillRect`, `arc`, `...
这款简单的游戏将模拟一个在屏幕上移动并反弹的小球，为初学者提供了一个了解Python图形用户界面（GUI）编程和物理模拟的实践平台。我们将主要关注以下几个核心知识点： 1. **Python基础知识**：首先，你需要熟悉...