欲观看动态效果请点此下载代码并用Chrome或者Firefox打开。

图例：

代码：

  1. <!DOCTYPE html>
  2. <html lang="utf-8">
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <head>
  5.      <title>更多碰撞球 19.3.4 8:53 by:逆火狂飙 horn19782016@163.com</title>
  6.  
  7.      <style>
  8.      #canvas{
  9.         background:#ffffff;
  10.         cursor:pointer;
  11.         margin-left:10px;
  12.         margin-top:10px;
  13.         -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  14.         -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  15.         box-shadow:3px 3px 6px rgba(0,0,0,0.5);
  16.      }
  17.  
  18.      #controls{
  19.         margin-top:10px;
  20.         margin-left:15px;
  21.      }
  22.      </style>
  23.  
  24.     </head>
  25.  
  26.      <body onload="init()">
  27.         <div id="controls">
  28.             <input id='animateBtn' type='button' value='运动'/>
  29.         </div>
  30.  
  31.         <canvas id="canvas" width="750px" height="500px" >
  32.             出现文字表示你的浏览器不支持HTML5
  33.         </canvas>
  34.      </body>
  35. </html>
  36. <script type="text/javascript">
  37. <!--
  38. var paused=true;
  39. animateBtn.onclick=function(e){
  40.     paused=! paused;
  41.  
  42.     if(paused){
  43.         animateBtn.value="运动";
  44.     }else{
  45.  
  46.         animateBtn.value="暂停";
  47.         window.requestAnimationFrame(animate);
  48.     }
  49. }
  50. //生成从minNum到maxNum的随机数
  51. function randomNum(minNum,maxNum){
  52.     switch(arguments.length){
  53.         case 1:
  54.             return parseInt(Math.random()*minNum+1,10);
  55.         break;
  56.         case 2:
  57.             return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10);
  58.         break;
  59.             default:
  60.                 return 0;
  61.             break;
  62.     }
  63. }
  64.  
  65. var ctx;// 绘图环境
  66. var balls=[];// 球数组
  67. function init(){
  68.  
  69.     var canvas=document.getElementById('canvas');
  70.     canvas.width=750;
  71.     canvas.height=500;
  72.     ctx=canvas.getContext('2d');
  73.  
  74.     for(var i=0;i<500;i++){
  75.         var ball={};
  76.         ball.x=randomNum(0,canvas.width);
  77.         ball.y=randomNum(0,canvas.height);
  78.  
  79.         ball.vx=randomNum(-10,10);
  80.         ball.vy=randomNum(-10,10);
  81.         ball.radius=25;
  82.         var r=randomNum(0,255);
  83.         var g=randomNum(0,255);
  84.         var b=randomNum(0,255);
  85.         ball.innerColor='rgba('+r+','+g+','+b+',1)';
  86.         ball.middleColor='rgba('+r+','+g+','+b+',0.5)';
  87.         ball.outerColor='rgba('+r+','+g+','+b+',0.3)';
  88.         ball.strokeStyle='rgba('+r+','+g+','+b+')';
  89.  
  90.         balls.push(ball);
  91.     }
  92. };
  93.  
  94. function update(){
  95.     for(var i=0;i<balls.length;i++){
  96.         var ball=balls[i];
  97.  
  98.         // 与左右墙壁的碰撞检测
  99.         if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){
  100.             ball.vx=-ball.vx;
  101.         }
  102.  
  103.         // 与上下墙壁的碰撞检测
  104.         if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){
  105.             ball.vy=-ball.vy;
  106.         }
  107.  
  108.         // 小球之前的碰撞检测
  109.         for(var j=0;j<balls.length;j++){
  110.             if(i!=j){
  111.                 var other=balls[j];
  112.  
  113.                 var distance=Math.sqrt( Math.pow((ball.x+ball.vx-other.x-other.vx),2)+Math.pow((ball.y+ball.vy-other.y-other.vy),2));
  114.  
  115.                 if(distance<ball.radius+other.radius){
  116.                     // 如果两个碰撞小球的质量相等，联立动量守恒和能量守恒方程时可解得：两个小球碰撞后交换速度。
  117.                     var x=ball.vx;
  118.                     ball.vx=other.vx;
  119.                     other.vx=x;
  120.  
  121.                     var y=ball.vy;
  122.                     ball.vy=other.vy;
  123.                     other.vy=y;
  124.                 }
  125.             }
  126.         }
  127.  
  128.         ball.x+=ball.vx;
  129.         ball.y+=ball.vy;
  130.     }
  131. }
  132.  
  133. function draw(){
  134.     ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
  135.  
  136.     for(var i=0;i<balls.length;i++){
  137.         var ball=balls[i];
  138.  
  139.         gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius);
  140.         gradient.addColorStop(0.3,ball.innerColor);
  141.         gradient.addColorStop(0.5,ball.middleColor);
  142.         gradient.addColorStop(1.0,ball.outerColor);
  143.  
  144.         ctx.save();
  145.         ctx.beginPath();
  146.         ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false);
  147.         ctx.fillStyle=gradient;
  148.         ctx.strokeStyle=ball.strokeStyle;
  149.         ctx.fill();
  150.         ctx.stroke();
  151.         ctx.restore();
  152.     }
  153. }
  154.  
  155. function animate(){
  156.     if(!paused){
  157.  
  158.         update();
  159.         draw();
  160.  
  161.         setTimeout( function(){
  162.             window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率
  163.         }, 0.10 * 1000 );// 延时执行
  164.     }
  165. }
  166. //-->
  167. </script>

2019年3月4日09点12分

[Canvas]更多的球的更多相关文章

  1. 简单的运动学，用canvas写弹力球

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 跟之前的随笔一样,因为本人仍是菜鸟一只,所以用到的技术比较简单,不适合大神观看...... 学canvas学了有一个多礼拜了,觉得canv ...

  2. THREE.js代码备份——canvas - geometry - earth(球体贴纹理)

    <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - g ...

  3. Android核心分析之二十八Android GDI之Surface&Canvas

    Surface&Canvas Canvas为在画布的意思.Android上层的作图几乎都通过Canvas实例来完成,其实Canvas更多是一种接口的包装.drawPaints ,drawPoi ...

  4. canvas动画气球

    canvas小球的动画我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实现的小球动画效果,可以参考下 我用canvas画布实 ...

  5. 从0开发3D引擎（四）：搭建测试环境

    目录 上一篇博文 了解自动化测试 单元测试 集成测试 端对端测试 通过打印日志来调试 了解运行测试 断点调试 通过Spector.js测试WebGL 通过log调试Shader 移动端测试 了解性能测 ...

  6. 【转载】VC维的来龙去脉

    本文转载自 火光摇曳 原文链接:VC维的来龙去脉 目录: 说说历史 Hoeffding不等式 Connection to Learning 学习可行的两个核心条件 Effective Number o ...

  7. android图形基础知识

    Android核心分析(23)-----Andoird GDI之基本原理及其总体框架 2010-06-13 22:49 18223人阅读 评论(18) 收藏 举报 AndroidGDI基本框架 在An ...

  8. 机器学习之支持向量机（SVM）

    支持向量机 百度百科(基本看不懂):http://baike.baidu.com/link?url=Z4MU6AYlf5lOX7UGHVYg9tBvxBGOkriPtNt0DixmscnMz06q5f ...

  9. VC维的来龙去脉——转载

    VC维的来龙去脉——转载自“火光摇曳” 在研究VC维的过程中,发现一篇写的很不错的VC维的来龙去脉的文章,以此转载进行学习. 原文链接,有兴趣的可以参考原文进行研究学习 目录: 说说历史 Hoeffd ...

随机推荐

  1. CRC 概述

    Acquired from: ftp.adelaide.edu.au:/pub/rocksoft/crc_v3.txt or ftp://ftp.rocksoft.com/papers/crc_v3. ...

  2. PHP 7 来了，PHP 6 去哪儿了？

    PHP7来了,那么PHP6去哪儿了呢? PHP7简介 PHP7是PHP编程语言全新的一个版本,主要在性能方面获得了极大的提升.官方的文档显示,PHP7可以达到PHP5.x版本两倍的性能.同时还 对PH ...

  3. 多用StringBuilder,少用字符串拼接

    在C#中,在处理字符串拼接的时候,使用StringBuilder的效率会比硬拼接字符串高很多.到底有多高,如下: static void Main(string[] args) { string st ...

  4. 发布网站时应该把debug设置false

    在ASP.NET项目根目录下的Web.config中有这样的一个节点: <compilation debug="true" targetFramework="4.5 ...

  5. Java Calendar,Date,DateFormat,TimeZone,Locale等时间相关内容的认知和使用(6) Locale

    本章介绍Locale. 1 Locale 介绍 Locale 表示地区.每一个Locale对象都代表了一个特定的地理.政治和文化地区. 在操作 Date, Calendar等表示日期/时间的对象时,经 ...

  6. ios 获得通讯录中联系人的所有属性 亲测，可行 兼容io6 和 ios 7

    //获取通讯录中的所有属性,并存储在 textView 中,已检验,切实可行.兼容io6 和 ios 7 ,而且ios7还没有权限确认提示. -(void)getAddressBook { ABAdd ...

  7. zTree树

    <link rel="stylesheet" href="/static/zTreeV3/css/metroStyle/metroStyle.css" t ...

  8. 【docker】【Gitlab】gitlab中clone项目时，IP地址是一串数字（内网Gitlab的IP地址不正确）的问题解决

    首次在内网搭建Gitlab环境,在成功后在Gitlab上新建了一个项目. 然而在IDEA上clone项目时发现,项目地址如下: git@0096ce63c43f:root/jump.git 或者这样 ...

  9. Linux内核：分析coredump文件 - 内核代码崩溃

    转自:http://blog.csdn.net/guowenyan001/article/details/12975221 一.分析Core文件 1.1 找到core文件目录,启动mycrash:my ...

  10. Spring+Velocity(平台升级至Spring Framework 5.0.2)

    下载: http://repo.spring.io/release/org/springframework/spring/ Dear Spring community, I’m pleased to ...