<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>canvas 动态小球重叠效果</title>

 <script>

 window.onload=function()

 {

     var canvas=document.getElementById('canvas');

     var w=canvas.width;

     var h=canvas.height;

     var num=30;　　// 小球个数

     var balls=[]; // 小球存放数组

     var cxt=canvas.getContext('2d');

     var t=null;

     function getBalls()  // 创建小球

     {

         for(var i=0;i<num;i++)

         {

             // 小球随机颜色

             var tempR=Math.floor(Math.random()*255);

             var tempG=Math.floor(Math.random()*255);

             var tempB=Math.floor(Math.random()*255);

             var tempColor='rgb('+tempR+','+tempG+','+tempB+')';

             //小球随机大小位置

             var tempR=Math.floor(Math.random()*30+20);

             var tempX=Math.floor(Math.random()*(w-tempR)+tempR);

             var tempY=Math.floor(Math.random()*(h-tempR)+tempR);

             var tempBall={

                 x:tempX,

                 y:tempY,

                 r:tempR,

                 color:tempColor,

                 stepX:Math.floor(Math.random()*20-10),

                 stepY:Math.floor(Math.random()*20-10), // 步长 差值

             };

             balls.push(tempBall);

         }//-----------------------------------------创建小球

     }

     function updateBalls()  // 更新小球

     {

         for(var i=0;i<balls.length;i++)

         {

             balls[i].x+=balls[i].stepX;

             balls[i].y+=balls[i].stepY;

             bumpTest(balls[i]);  // 更新后的小球数组 x y 位置

         }

     }

     function bumpTest(ele) // 碰撞检测

     {

         //zuo -->向右走

         if(ele.x<=ele.r)

         {

             ele.x=ele.r;

             ele.stepX=-ele.stepX; // 反方向运动

         }

         // you

         if(ele.x >= w-ele.r)

         {

             ele.x=w-ele.r;

             ele.stepX=-ele.stepX;

         }

         //shang

         if(ele.y<=ele.r)

         {

             ele.y=ele.r;

             ele.stepY=-ele.stepY;

         }

         // xia

         if(ele.y>=h-ele.r)

         {

             ele.y=h-ele.r

             ele.stepY=-ele.stepY;

         }

     }

     function renderBalls()//重置画布

     {

         cxt.clearRect(0,0,w,h);     // 清空画布

         for(var i=0;i<balls.length;i++)

         {

             cxt.beginPath();// 开始路径

             cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);

             cxt.fillStyle=balls[i].color;

             cxt.globalCompositeOperation='xor';

             cxt.closePath();// 闭合路径

             cxt.fill();  //填充颜色

         }

     }

     getBalls();

     clearInterval(t);

      t=setInterval(function(){

         updateBalls();// 更新小球

         renderBalls();// 重新绘制小球

     },50);

 }

 </script>

 </head>

 <body>

 <button onClick="window.history.go()"> 点击变换 </button>

 <canvas width="500" height="300" style="border:1px solid #000" id="canvas"></canvas>

 </body>

 </html>

Canvas 动态小球重叠效果的更多相关文章

  1. canvas动态小球重叠效果

    前面的话 在javascript运动系列中,详细介绍了各种运动,其中就包括碰壁运动.但是,如果用canvas去实现,却是另一种思路.本文将详细介绍canvas动态小球重叠效果 效果展示 静态小球 首先 ...

  2. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  3. canvas三角函数模拟水波效果

    .katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...

  4. 酷！使用 jQuery & Canvas 制作相机快门效果

    在今天的教程中,我们将使用 HTML5 的 Canvas 元素来创建一个简单的摄影作品集,它显示了一组精选照片与相机快门的效果.此功能会以一个简单的 jQuery 插件形式使用,你可以很容易地整合到任 ...

  5. 如何使用 HTML5 Canvas 制作水波纹效果

    今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

  6. Android 动态Tab分页效果实现

    当前项目使用的是TabHost+Activity进行分页,目前要做个报表功能,需要在一个Tab页内进行Activity的切换.比方说我有4个Tab页分别为Tab1,Tab2,Tab3,Tab4,现在的 ...

  7. 【转】提示框第三方库之MBProgressHUD iOS toast效果 动态提示框效果

    原文网址:http://www.zhimengzhe.com/IOSkaifa/37910.html MBProgressHUD是一个开源项目,实现了很多种样式的提示框,使用上简单.方便,并且可以对显 ...

  8. 深入学习CSS外边距margin（重叠效果，margin传递效果，margin:auto实现块级元素水平垂直居中效果）

    前言 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪 ...

  9. 基于HTML5 Canvas可撕裂布料效果

    分享一款布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 在线预览   源码下载 实现的代码. ...

随机推荐

  1. springmvc 路径问题

    web项目中的相对路径可以分为二类: 1.以斜杠开头:以斜杠开头的又分为二类(分类依据是斜杠出现的位置):如果出现在java代码或者配置文件(xml,properties等),这个路径叫做后台路径. ...

  2. JAVA基础知识总结11（异常）

    异常: 就是不正常.程序在运行时出现的不正常情况.其实就是程序中出现的问题.这个问题按照面向对象思想进行描述,并封装成了对象.因为问题的产生有产生的原因.有问题的名称.有问题的描述等多个属性信息存在. ...

  3. go get

    go get 命令用于从远程代码仓库(比如 Github )上下载并安装代码包.注意,go get 命令会把当前的代码包下载到 $GOPATH 中的第一个工作区的 src 目录中,并安装. 如果在 g ...

  4. C++字符串流保存数据

    文件流是以外存文件为输入输出对象的数据流.字符串流是以内存中用户定义的字符数组(字符串)为输入输出对象的. 建立输出字符串流: ostrstream strout(c,sizeof(c));第一个参数 ...

  5. Angular22 HttpClient的使用

    1 HttpClient介绍 HttpClient时Http的演进,注意:Http在@angular/http中,而HttpClient在@angular/common/http中: 使用前需要在模块 ...

  6. hibernate里的实体类中不能重写toString

    @Test报堆栈溢出,   在main中报错toString

  7. 算法Sedgewick第四版-第1章基础-2.1Elementary Sortss-001选择排序法(Selection sort)

    一.介绍 1.算法的时间和空间间复杂度 2.特点 Running time is insensitive to input. The process of finding the smallest i ...

  8. loj10241 取石子游戏1

    传送门 分析 我们发现如果在某个人取完之后还剩k+1个石子,则这个人必胜.所以我们可以将n个石子转化为n-k-1个,然后不断递归的转化下去.最后我们可以得到对于n个石子的胜负只与谁先取到n%(k+1) ...

  9. SDUT 3343 数据结构实验之二叉树四：还原二叉树

    数据结构实验之二叉树四:还原二叉树 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 给定一棵 ...

  10. ISE 14.7 XST.exe stop working

    http://www.xilinx.com/support/answers/59851.html Description XST completes but then instead of retur ...