Canvas 动态小球重叠效果

时间：2022-09-02 08:29:21
 <!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 &amp&semi; 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&colon;auto实现块级元素水平垂直居中效果）

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

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

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

随机推荐

  1. css浮雕效果

    浮雕效果 今天看百度地图看到了一个效果 感觉这个效果用在网页上应该蛮赞的,于是就学习了一下 浮雕效果需要用到伸缩盒的知识(flex) flex在chrome是完全支持的,要加-webkit-前缀,其他 ...

  2. 音频软件消除人声的一点体会（cood edit &comma;goldwav&rpar;

    音频软件消除人声的一点体会(cood  edit ,goldwav) 使用方法: 1.打开文件 2.命令处理(红色位置可以调整到你认为合适的数据或效果) 3.效果:两个软件均处理后的效果均可以接受.不 ...

  3. url编码base编码解码十六进制

    0x25346425353425343525333525343325366125343525373725346425353125366625373825346425343425363725346225 ...

  4. 前端之常用标签和CSS初识

    外层div的宽度是100%,就是视口的大小,当视口被拉窄到小于内层div的宽度980px时,比如800px,此时 外层div宽度为800px,内层div宽度依然为980px,而css中只设置了外层di ...

  5. Visual Studio 2013 Web开发、新增功能：&ldquo&semi;Browser Link&rdquo&semi;

    微软正式发布Visual Studio 2013 RTM版,微软还发布了Visual Studio 2013的最终版本..NET 4.5.1以及Team Foundation Server 2013. ...

  6. mysql出现Got error 28 from storage engine错误

    今天晚上碰到app数据库出错Got error 28 from storage engine 服务程序出现这样的错误 Sql.Data---Error writing file '/tmp/ML2ig ...

  7. Python集合set

    集合 set 集合是无序的 集合的值是唯一的 求两个集合的关系: list1 = [1,4,5,7,3,6,7,9] list2 = set([2,6,0,66,22,8,4]) list3 = se ...

  8. SQL Server 关于CROSS APPLY 和 OUTER APPLY应用

    先看看语法: <left_table_expression>  {cross|outer} apply<right_table_expression> 再让我们了解一下appl ...

  9. 【转】WPF自定义控件与样式&lpar;9&rpar;-树控件TreeView与菜单Menu-ContextMenu

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等. 本文主要内容: 菜单Menu的自定义样式: 右键菜单ContextMenu的自定义样式 ...

  10. 有用的url地址

    https://docs.oracle.com/javase/7/docs/api/overview-summary.html https://docs.oracle.com/javase/8/doc ...

相关文章