博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
HTML5 - Canvas动画样例（谷歌弹跳球）
阅读量：4977 次
发布时间：2019-06-12

本文共 8276 字，大约阅读时间需要 27 分钟。

1，样例说明

（1）在没有鼠标介入的情况下，这些球就像有磁性一样拼成“Google”字样。
（2）在鼠标移动到其中后，小球像是受到了排斥，向画布的四周扩散，然后不规则地反弹回来。

原文出自：  转载请保留原文链接：

 

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>

转载于:https://www.cnblogs.com/LiuJL/p/6078212.html

你可能感兴趣的文章
SpringBoot在idea中的热部署配置
查看>>
MyEclipse连接SQL Server 2008数据库的操作方法
查看>>
JS验证图片格式和大小并预览
查看>>
laravel5.2 移植到新服务器上除了“/”路由 ,其它路由对应的页面显示报404错误（Object not found!）———新装的LAMP没有加载Rewrite模块...
查看>>
编写高质量代码--改善python程序的建议（六）
查看>>
windows xp 中的administrator帐户不在用户登录内怎么解决？
查看>>
接口和抽象类有什么区别
查看>>
Codeforces Round #206 (Div. 2)
查看>>
**p
查看>>
优先队列详解
查看>>
VS2012 创建项目失败，，提示为找到约束。。。。
查看>>
设计类图
查看>>
类对象
查看>>
[Voice communications] 声音的滤波
查看>>
软件建模——第9章 毕业论文管理系统—面向对象方法
查看>>
[SDOI2008]洞穴勘测
查看>>
Difference between Linearizability and Serializability
查看>>
IDEA使用操作文档
查看>>
UIView
查看>>
添加日期选择控件
查看>>
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！
当前时间: 2024-11-08 16:52:15   当前IP: 18.217.209.61   联系邮箱:javaeecc@qq.com     Copyright © 2020 - 2022 baihongyu.com 京ICP备2021015314号-2
强烈建议你试试无所不能的CHAT-GPT，快点击我
强烈建议你试试无所不能的CHAT-GPT，快点击我