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动画样例（谷歌弹跳球）的更多相关文章

  1. [js高手之路]html5 canvas动画教程 - 边界判断与小球粒子模拟喷泉,散弹效果

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文,我们要做点有意思的效果,首先,来一个简单 ...

  2. 7 个顶级的 HTML5 Canvas 动画赏析

    HTML5确实是一项改革浏览器乃至整个软件行业的新技术,它可以帮助我们Web开发者很方便地在网页上实现动画特效,而无需臃肿的Flash作为支撑.本文分享7个顶级的HTML5 Canvas 动画,都有非 ...

  3. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  4. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  5. Html5 Canvas动画旋转的小方块；

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  6. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  7. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  8. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  9. [js高手之路]html5 canvas动画教程 - 边界判断与反弹

    备注:本文后面的代码,如果加载了ball.js,那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹: 当小球碰到canvas的四个方向的 ...

随机推荐

  1. HDU 3732 Ahui Writes Word 多重背包优化01背包

    题目大意:有n个单词,m的耐心,每个单词有一定的价值,以及学习这个单词所消耗的耐心,耐心消耗完则,无法学习.问能学到的单词的最大价值为多少. 题目思路:很明显的01背包,但如果按常规的方法解决时间复杂 ...

  2. linux的学习系列 1---简介

    Linux简介 严格的来讲,Linux 不算是一个操作系统,只是一个 Linux 系统中的内核,即计算机软件与硬件通讯之间的平台:Linux的全称是GNU/Linux,这才算是一个真正意义上的Linu ...

  3. Jmeter的优点是什么？除了轻量级，它和LoadRunner有什么本质区别

    1.jmeter的架构和loadrunner原理一样,都是通过中间代理,监控和收集并发客户端发出的指令,把他们生成脚本,再发送到应用服务器,再监控服务器反馈结果的一个过程: 2.分布式中间代理功能在j ...

  4. JS-DOM操作应用高级（二）

    搜索 字符串比较.忽略大小写----大小写转换.模糊搜索----search的使用.split.高亮显示及筛选 toLowerCase() 方法用于把字符串转换为小写 str.search('')   ...

  5. HDU1969:Pie(二分)

    Pie Time Limit : 5000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Total Submissio ...

  6. 学习笔记——装饰器模式Decorator

    装饰器模式,最典型的例子. 工厂新开了流水线,生产了手机外壳,蓝天白云花色.刚准备出厂,客户说还要印奶牛在上面,WTF…… 时间上来不及,成本也不允许销毁了重来,怎么办?弄来一机器A,专门在蓝天白云的 ...

  7. byte 读写文件

    import java.io.ByteArrayOutputStream; import java.io.File; import java.io.FileInputStream; import ja ...

  8. 转： 理解 JMeter 聚合报告（Aggregate Report）

    Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”.今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下,以备大家查阅. 如果 ...

  9. 用MyEclipse自动生成hibernate映射文件和实体类

    创建数据库,创建相应的表 点击图标,选择MyEclipse Datebase Explorer 右击空白区域,选择new菜单,根据提示创建数据库连接,创建好后会显示你所创建的连接名,如图mysqldb ...

  10. JSP标准标签库(JSTL)--函数标签库 fn

    和String的方法类似,就是对String的一种封装. No. 函数标签名称 描述 1 ${fn:contains()} 查询某字符串是否存在,区分大小写 2 ${fn:containsIgnore ...