<!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. LAMP 3.1 mysql的root密码重置

    给mysql设置密码 /usr/local/mysql/bin/mysql -uroot 可以直接登录mysql 设置密码 /usr/local/mysql/bin/mysqladmin -uroot ...

  2. ffmpeg部分编译选项

    -enable-neon  (如果使用了arm公司提供的neon加速技术,则可以并行的读取多个元素.参考网址:http://www.cnblogs.com/hrlnw/p/3723072.html) ...

  3. Android开源地图项目 BigPlanetTracks 学习随笔

    一.         app主体部分 [tyt.android.bigplanettracks] 二.         地图部分 [tyt.android.bigplanettracks.maps] ...

  4. springboot启动过程（2）-run方法

    1 springApplication的run run方法主要是用于创造spring容器ConfigurableApplicationContext对象. public ConfigurableApp ...

  5. 联想《拯救者》U盘UEFI启动装win7[完美激活]（4）

    引用这篇文章 http://www.nwmie.com.cn/jiaocheng/1394.html 我们常常不想把自己的电脑从GUID分区方式改到MBR,但是这样装完win7无法激活,embarra ...

  6. ZROI2018提高day4t3

    传送门 分析 我们假设如果一个点是0则它的值为-1,如果一个点是1则值为1,则一个区间的答案便是max(pre[i]+sur[i]),这里的pre[i]表示此区间i点和它之前的的前缀的最大值,sur[ ...

  7. .net中值类型、引用类型理解的c#代码示例

    下面是以前在公司的时候给别人讲解值类型.引用类型时创建的c#代码示例,从实际使用时的角度出发,对于初学者还是很有帮助的.这里并没有深入讲解值类型包含引用类型成员时(如struct)在内存中的存放情况等 ...

  8. Java50道经典习题-程序38 求字符串长度

    题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. import java.util.Scanner; public class Prog38 { public stat ...

  9. Sqlserver根据条件去除重复数据并且留下的是最大值数据

    项目中需要根据条件获取一些数据,但是如果条件相同的情况下,要去掉条件一样的并且某个值是最小的数据,留下的是最大值数据. 简单记录一下sql: --去重保留最大值那条 --Year和MCode一样的前提 ...

  10. 抽象类（abstract class）和接口（Interface）的区别

    前言 抽象类(abstract class)和接口(Interface)是Java语言中对于抽象类定义进行支持的两种机制,赋予了Java强大的面向对象能力. 二者具有很大的相似性,甚至可以相互替换,因 ...