<!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. LNMP 1.4 nginx启动脚本和配置文件

    编写Nginx启动脚本,写入下面这段,授权755 vim /etc/init.d/nginx #!/bin/bash # chkconfig: - # description: http servic ...

  2. 根据URL下载文件

    commons-io 包中已经封装好了,直接可以使用 一.添加依赖 <dependency> <groupId>org.apache.commons</groupId&g ...

  3. oracle系统函数（日期函数）

    oracle系统函数(日期函数) 调用日期函数时,首先要明确两个概念,时间戳和日期是不同的,日期中包括年月日但不包括小时分钟秒,时间戳包括年月日小时分钟秒.在oracle中,一般情况下,函数中包含da ...

  4. js刷新当前页面的几种方法

    如何实现刷新当前页面呢?借助js你将无所不能. 1,reload 方法,该方法强迫浏览器刷新当前页面.语法:location.reload([bForceGet])   参数: bForceGet, ...

  5. C++的引用的使用

    1引用的定义 引用时C++对C的一个重要的扩充,引用的作用是给变量起一个别名. 例如: int a; int &b=a;//声明b是a的引用 经过以上的声明,b就成为了a的别名,a和b的地位以 ...

  6. php学习笔记-超级全局变量

    超级全局变量,超级在哪里呢?相对于global类型的变量,超级全局变量的作用域是没有限制的,函数外.函数内.随便一个PHP文件都可以引用超级全局变量.在PHP中有很多超级全局变量, 常用的有_SERV ...

  7. conda 添加bioconda源，创建/删除/重命名环境

    1.conda安装 在https://repo.continuum.io/miniconda/选择conda版本 wget "https://repo.continuum.io/archiv ...

  8. GCD学习(七) dispatch_apply

    dispathc_apply 是dispatch_sync 和dispatch_group的关联API.它以指定的次数将指定的Block加入到指定的队列中.并等待队列中操作全部完成. NSArray ...

  9. 718C Sasha and Array

    传送门 题目 Sasha has an array of integers a1, a2, ..., an. You have to perform m queries. There might be ...

  10. kafka的producer执行卡住的问题

    使用windows开发producer然后向远程的kakfa集群发送数据,但是一直卡着, 在window的hosts文件添加kafka集群的主机名和ip的映射就好了 网上搜了下,大致是producer ...