<!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. ie6-ie8不支持opacity，rgba解决方法

    半透明部分设置样式:opacity:0.7在ie9/ie10/ff/chrome/opera/safari显示正常. 但是这样在ie6-ie8中是不支持的,需要加上下面这句话: filter: pro ...

  2. Codeforces #495 Div2 problem E. Sonya and Ice Cream(1004E)

    网上的大多是用树的直径做的,但是一些比较巧妙的做法,来自https://www.cnblogs.com/qldabiaoge/p/9315722.html. 首先用set数组维护每一个节点所连接的边的 ...

  3. SpringBoot10 整合JSP

    1 整合JSP 1.1 导入相关依赖 JSP依赖.JSTL依赖 <?xml version="1.0" encoding="UTF-8"?> < ...

  4. php学习笔记-逻辑运算符

    $a and $b 只有当$a和$b都是true才返回true,否则false. $a or $b 只要$a或者$b至少有一个是true则返回true.意思是或者$a是true,或者是$b是true, ...

  5. jquery 仿文本编辑器（智能提示输入文字）

    1.前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InputAu ...

  6. Python程序设计5——函数

    本章介绍Python中模块和函数的概念. Python程序是由包.模块和函数三者组成,包是由一系列模块组成的集合,模块是处理某一类问题的函数和类的集合.Python提供的许多工具包和模块安装在Pyth ...

  7. sed编辑器使用(转)

    1.Sed简介 sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pattern space),接着用sed命令处理缓冲区中的内容,处理完成后, ...

  8. hive和sequoiadb对接的问题

    使用hive和spark对接的时候,当两个表做JOIN的时候,如果表的数据量很大一定要做 set hive.auto.convert.join=false

  9. STL之priority_queue(优先队列)

    priority_queue是一个容器适配器,在这个容器里第一个数据元素是最大的.它的使用场景是什么样:如果12306抢票,为什么黄牛能抢这么多票,感觉12306那边的请求队列是一个优先队列,黄牛的请 ...

  10. CodeForces 141C Queue (构造)

    题意:n 个人在排队,然后给出每个人的前面比他身高高的人的数量hi,让你给出一种排列,并给出一种解. 析:首先,hi 小的要在前面,所以先进行排序,然后第一个人的 h1 必须为0,我们可以令身高为 1 ...