HTML5 - Canvas动画样例(谷歌弹跳球)
1,样例说明
原文出自: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的四个方向的 ...
随机推荐
- 大学二三事——那些人(1)
校歌墙的对面是一座历史比较悠久的建筑,以前叫做12号楼,后来改成了"诚"字楼. 在诚字楼一楼昏暗的走廊上,你总是能看见一位大概四五十岁的大叔,有时他会指着挂在墙上的学校简介,一个人 ...
- VideoView的视频的全屏播放
import android.net.Uri;import android.os.Bundle;import android.app.Activity;import android.content.I ...
- LightOJ 1234 Harmonic Number 调和级数部分和
题目链接:http://lightoj.com/volume_showproblem.php?problem=1234 Sample Input Sample Output Case : Case : ...
- KNN邻近分类算法
K邻近(k-Nearest Neighbor,KNN)分类算法是最简单的机器学习算法了.它采用测量不同特征值之间的距离方法进行分类.它的思想很简单:计算一个点A与其他所有点之间的距离,取出与该点最近的 ...
- 如何延长zencart1.5后台的登录时间而不退出
2012-12-25 使用过zencart1.5版本的人都知道,后台登陆后,如果没有任何操作的话最长15分钟后就自动退出,这个对于后台管理是比较麻烦的.这个是zencart1.5在安全性上做的一个改进 ...
- STM32F2系列低功耗总结
序号 运行状态 进入指令(stm32f2xx_pwr.c) 退出条件 状态 IO管脚状态 进一步降低功耗的措施 1 运行模式 上电/系统复位后的默认模式, HCLK驱动CPU运行代码 可通过指令 进入 ...
- java开发第一天
今天是项目开始的时间,整体来说还是算顺利的.提前分好组,然后是听课时可以有人帮忙占座位的,感觉上是挺好的. 项目开发的难度看了看,由于有了第一次MFC开发的经验,所以这次听课感觉非常的有目标性,而且总 ...
- JavaScript 面向对象(一)
参考:http://www.iteye.com/topic/1123555
- HDU 3038 How Many Answers Are Wrong 很有意思的一道并查集问题
题目大意:TT 和 FF玩游戏(名字就值五毛),有一个数列,数列有N个元素,现在给出一系列个区间和该区间内各个元素的和,如果后出现的一行数据和前面一出现的数据有矛盾,则记录下来.求有矛盾数据的数量. ...
- jaxb异常 Class has two properties of the same name username
import javax.xml.bind.annotation.XmlAccessType; import javax.xml.bind.annotation.XmlAccessorType; im ...