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. 解决编译时出现的警告：format string is not a string literal (potentially insecure)

    NSLog([NSString stringWithFormat:@"%@/%@B.jpg", createDir, uuid]);//这是我的写法 应该写成 NSString * ...

  2. OC 消息机制本质

    转载自:http://m.blog.csdn.net/blog/util_c/10287909 在Objective-C中,message与方法的真正实现是在执行阶段绑定的,而非编译阶段.编译器会将消 ...

  3. SDAU课程练习--problemQ(1016)

    题目描述 FJ is surveying his herd to find the most average cow. He wants to know how much milk this 'med ...

  4. hdu Eddy's picture （最小生成树）

    Eddy's picture Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other) Tota ...

  5. CodeForces 525D Arthur and Walls

    广搜.看了官方题解才会的..... 定义2*2的小矩阵,有三个是点,一个是星,这样的小矩阵被称为元素块. 首先把所有元素块压入队列,每次取出对头,检查是否还是元素块,如果是 那么将那个*改为点,否则跳 ...

  6. PD生成oracle表名带引号解决方案

    使用PowerDesigner生成数据库建表SQL脚本时,尤其是Oracle数据库时,表名一般会带引号.其实加引号是PL/SQL的规范,数据库会 严格按照“”中的名称建表,如果没有“”,会按照ORAC ...

  7. hdu_5711_Ingress(TSP+贪心)

    题目连接:hdu5711 这题是 HDU 女生赛最后一题,TSP+贪心,确实不好想,看了wkc巨巨的题解,然后再做的 题解传送门:Ingress #include<cstdio> #inc ...

  8. C#实现http断点下载

    我们寄希望于万能的解决方案,但是现实的情况总是很糟糕.在软件编程的世界中,技术分散的情况尤为严重,且不说各种语言拥有的优势不能融合,单就一门语言而言,就拥有众多的技术和相关技术需要学习.网络编程就是这 ...

  9. JavaScript判断数组是否存在key

    JS中复合数组associative array和对象是等同的,判断一个key是否存在于数组中(或对象是否包含某个属性),不能使用ary[key] == undefined,因为可能存在ary = { ...

  10. postfix+dovecot配置多域名邮件服务器

    mail邮局系统的MX(邮件交换)记录配置,以便收发邮件.(MX记录,是邮件交换记录,它指向一个邮件服务器,用于电子邮件系统发邮件时根据收信人的地址后缀来定位邮件服务器,如果没有做域名解析,邮局不能正 ...