HTML5 - Canvas动画样例（谷歌弹跳球）

1，样例说明

（1）在没有鼠标介入的情况下，这些球就像有磁性一样拼成“Google”字样。

（2）在鼠标移动到其中后，小球像是受到了排斥，向画布的四周扩散，然后不规则地反弹回来。

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1059.html

2.源码：

<!DOCTYPE HTML>

<html>

<head>

<style>

body {

margin: 0px;

padding: 0px;

}

canvas {

cursor: pointer;

border: 1px solid black;

margin:20px 20px 20px 20px;

}

</style>

</head>

<body>

<canvas id="myCanvas" width="578" height="200"></canvas>

<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 blue = '#3A5BCD';

var red = '#EF2B36';

var yellow = '#FFC636';

var green = '#02A817';

// G

balls.push(new Ball(173, 63, 0, 0, blue));

balls.push(new Ball(158, 53, 0, 0, blue));

balls.push(new Ball(143, 52, 0, 0, blue));

balls.push(new Ball(130, 53, 0, 0, blue));

balls.push(new Ball(117, 58, 0, 0, blue));

balls.push(new Ball(110, 70, 0, 0, blue));

balls.push(new Ball(102, 82, 0, 0, blue));

balls.push(new Ball(104, 96, 0, 0, blue));

balls.push(new Ball(105, 107, 0, 0, blue));

balls.push(new Ball(110, 120, 0, 0, blue));

balls.push(new Ball(124, 130, 0, 0, blue));

balls.push(new Ball(139, 136, 0, 0, blue));

balls.push(new Ball(152, 136, 0, 0, blue));

balls.push(new Ball(166, 136, 0, 0, blue));

balls.push(new Ball(174, 127, 0, 0, blue));

balls.push(new Ball(179, 110, 0, 0, blue));

balls.push(new Ball(166, 109, 0, 0, blue));

balls.push(new Ball(156, 110, 0, 0, blue));

// O

balls.push(new Ball(210, 81, 0, 0, red));

balls.push(new Ball(197, 91, 0, 0, red));

balls.push(new Ball(196, 103, 0, 0, red));

balls.push(new Ball(200, 116, 0, 0, red));

balls.push(new Ball(209, 127, 0, 0, red));

balls.push(new Ball(223, 130, 0, 0, red));

balls.push(new Ball(237, 127, 0, 0, red));

balls.push(new Ball(244, 114, 0, 0, red));

balls.push(new Ball(242, 98, 0, 0, red));

balls.push(new Ball(237, 86, 0, 0, red));

balls.push(new Ball(225, 81, 0, 0, red));

// O

var oOffset = 67;

balls.push(new Ball(oOffset + 210, 81, 0, 0, yellow));

balls.push(new Ball(oOffset + 197, 91, 0, 0, yellow));

balls.push(new Ball(oOffset + 196, 103, 0, 0, yellow));

balls.push(new Ball(oOffset + 200, 116, 0, 0, yellow));

balls.push(new Ball(oOffset + 209, 127, 0, 0, yellow));

balls.push(new Ball(oOffset + 223, 130, 0, 0, yellow));

balls.push(new Ball(oOffset + 237, 127, 0, 0, yellow));

balls.push(new Ball(oOffset + 244, 114, 0, 0, yellow));

balls.push(new Ball(oOffset + 242, 98, 0, 0, yellow));

balls.push(new Ball(oOffset + 237, 86, 0, 0, yellow));

balls.push(new Ball(oOffset + 225, 81, 0, 0, yellow));

// G

balls.push(new Ball(370, 80, 0, 0, blue));

balls.push(new Ball(358, 79, 0, 0, blue));

balls.push(new Ball(346, 79, 0, 0, blue));

balls.push(new Ball(335, 84, 0, 0, blue));

balls.push(new Ball(330, 98, 0, 0, blue));

balls.push(new Ball(334, 111, 0, 0, blue));

balls.push(new Ball(348, 116, 0, 0, blue));

balls.push(new Ball(362, 109, 0, 0, blue));

balls.push(new Ball(362, 94, 0, 0, blue));

balls.push(new Ball(355, 128, 0, 0, blue));

balls.push(new Ball(340, 135, 0, 0, blue));

balls.push(new Ball(327, 142, 0, 0, blue));

balls.push(new Ball(325, 155, 0, 0, blue));

balls.push(new Ball(339, 165, 0, 0, blue));

balls.push(new Ball(352, 166, 0, 0, blue));

balls.push(new Ball(367, 161, 0, 0, blue));

balls.push(new Ball(371, 149, 0, 0, blue));

balls.push(new Ball(366, 137, 0, 0, blue));

// L

balls.push(new Ball(394, 49, 0, 0, green));

balls.push(new Ball(381, 50, 0, 0, green));

balls.push(new Ball(391, 61, 0, 0, green));

balls.push(new Ball(390, 73, 0, 0, green));

balls.push(new Ball(392, 89, 0, 0, green));

balls.push(new Ball(390, 105, 0, 0, green));

balls.push(new Ball(390, 118, 0, 0, green));

balls.push(new Ball(388, 128, 0, 0, green));

balls.push(new Ball(400, 128, 0, 0, green));

// E

balls.push(new Ball(426, 101, 0, 0, red));

balls.push(new Ball(436, 98, 0, 0, red));

balls.push(new Ball(451, 95, 0, 0, red));

balls.push(new Ball(449, 83, 0, 0, red));

balls.push(new Ball(443, 78, 0, 0, red));

balls.push(new Ball(430, 77, 0, 0, red));

balls.push(new Ball(418, 82, 0, 0, red));

balls.push(new Ball(414, 93, 0, 0, red));

balls.push(new Ball(412, 108, 0, 0, red));

balls.push(new Ball(420, 120, 0, 0, red));

balls.push(new Ball(430, 127, 0, 0, red));

balls.push(new Ball(442, 130, 0, 0, red));

balls.push(new Ball(450, 125, 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);

});

}

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>

</body>

</html>

HTML5 - Canvas动画样例（谷歌弹跳球）的更多相关文章

[js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...
7 个顶级的 HTML5 Canvas 动画赏析
HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...
8个经典炫酷的HTML5 Canvas动画欣赏
HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...
7个惊艳的HTML5 Canvas动画效果及源码
HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...
Html5 Canvas动画旋转的小方块；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET
HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示
HTML5 Canvas动画效果实现原理
在线演示使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...
[js高手之路]html5 canvas动画教程 - 边界判断与反弹
备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

随机推荐

iOS进阶推荐的书目
<Effective Objective-C 2.0:编写高质量iOS与OS X代码的52个有效方法>([英]Matt Galloway) 很多面试题有涉及 <IOS数据库应用高级编 ...
java 方法的重载的语法规则
class People { float hello(int a,int b) { return a+b; } float hello(long a,int b) { return a-b; } do ...
EDA 事件驱动框架
事件代表过去发生的事件,事件既是技术架构概念,也是业务概念.以事件为驱动的编程模型称为事件驱动架构EDA. EDA是一种以事件为媒介,实现组件或服务之间最大松耦合的方式.传统面向接口编程是以接口为媒介 ...
Image File Execution Options(转)
今天公司的一台计算机无法正常工作送来维修,经简单判断是感染了很多病毒,即使在安全模式下也无法清除:于是将硬盘摘下挂到另外一台机器上,用卡巴斯基对病毒进行了查杀,再次启动计算机后发现很多系统维护程序以及 ...
【啊哈！算法】算法7：Dijkstra最短路算法
上周我们介绍了神奇的只有五行的Floyd最短路算法,它可以方便的求得任意两点的最短路径,这称为“多源最短路”.本周来来介绍指定一个点(源点)到其余各个顶点的最短路径,也叫做“单源最短路径”.例如求下图 ...
awk 数组排序-- asort 与 asorti
两者排序区别: asort 是对数组的值进行排序,并且会丢掉原先键值: asorti是对数组的下标进行排序. 数据文件: 12 34 78 90 23 45 1. awk是关联数组.for-in循环输 ...
linux仅修改文件夹权限；linux 分别批量修改文件和文件夹权限
比如我想把/var/www/html下的文件全部改成664,文件夹改成775,怎么做呢方法一: 先把所有文件及文件夹改成664,然后把所有文件夹改成775 root@iZ25bq9kj7yZ:/ c ...
Android系统权限及签名
Android系统权限及签名 2015-03-23 19:13:33CSDN-chen52671-点击数:50 Android权限及签名引子现象:系统中的一个定制Service,服务是 ...
转: window中使用PSFTP/WinSCP实现SFTP上传下载
sftp 服务器: dbmonitor 1.sftp属于交互式的,所以你得缓存下命令#!/bin/shsftp -o Port=3322 root@172.16.1.21:/opt << ...
ural1542 Autocompletion
Autocompletion Time limit: 2.0 secondMemory limit: 64 MB The Japanese are infinitely in love with ma ...

HTML5 - Canvas动画样例（谷歌弹跳球）

HTML5 - Canvas动画样例（谷歌弹跳球）的更多相关文章

随机推荐

热门专题