[Canvas]更多的球
2024-10-06 16:50:55
欲观看动态效果请点此下载代码并用Chrome或者Firefox打开。
图例:
代码:
<!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>更多碰撞球 19.3.4 8:53 by:逆火狂飙 horn19782016@163.com</title> <style> #canvas{ background:#ffffff; cursor:pointer; margin-left:10px; margin-top:10px; -webkit-box-shadow:3px 3px 6px rgba(0,0,0,0.5); -moz-box-shadow:3px 3px 6px rgba(0,0,0,0.5); box-shadow:3px 3px 6px rgba(0,0,0,0.5); } #controls{ margin-top:10px; margin-left:15px; } </style> </head> <body onload="init()"> <div id="controls"> <input id='animateBtn' type='button' value='运动'/> </div> <canvas id="canvas" width="750px" height="500px" > 出现文字表示你的浏览器不支持HTML5 </canvas> </body> </html> <script type="text/javascript"> <!-- var paused=true; animateBtn.onclick=function(e){ paused=! paused; if(paused){ animateBtn.value="运动"; }else{ animateBtn.value="暂停"; window.requestAnimationFrame(animate); } } //生成从minNum到maxNum的随机数 function randomNum(minNum,maxNum){ switch(arguments.length){ case 1: return parseInt(Math.random()*minNum+1,10); break; case 2: return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); break; default: return 0; break; } } var ctx;// 绘图环境 var balls=[];// 球数组 function init(){ var canvas=document.getElementById('canvas'); canvas.width=750; canvas.height=500; ctx=canvas.getContext('2d'); for(var i=0;i<500;i++){ var ball={}; ball.x=randomNum(0,canvas.width); ball.y=randomNum(0,canvas.height); ball.vx=randomNum(-10,10); ball.vy=randomNum(-10,10); ball.radius=25; var r=randomNum(0,255); var g=randomNum(0,255); var b=randomNum(0,255); ball.innerColor='rgba('+r+','+g+','+b+',1)'; ball.middleColor='rgba('+r+','+g+','+b+',0.5)'; ball.outerColor='rgba('+r+','+g+','+b+',0.3)'; ball.strokeStyle='rgba('+r+','+g+','+b+')'; balls.push(ball); } }; function update(){ for(var i=0;i<balls.length;i++){ var ball=balls[i]; // 与左右墙壁的碰撞检测 if(ball.x+ball.vx+ball.radius>ctx.canvas.width || ball.x+ball.vx-ball.radius<0){ ball.vx=-ball.vx; } // 与上下墙壁的碰撞检测 if(ball.y+ball.vy+ball.radius>ctx.canvas.height || ball.y+ball.vy-ball.radius<0){ ball.vy=-ball.vy; } // 小球之前的碰撞检测 for(var j=0;j<balls.length;j++){ if(i!=j){ var other=balls[j]; 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)); if(distance<ball.radius+other.radius){ // 如果两个碰撞小球的质量相等,联立动量守恒和能量守恒方程时可解得:两个小球碰撞后交换速度。 var x=ball.vx; ball.vx=other.vx; other.vx=x; var y=ball.vy; ball.vy=other.vy; other.vy=y; } } } ball.x+=ball.vx; ball.y+=ball.vy; } } function draw(){ ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height); for(var i=0;i<balls.length;i++){ var ball=balls[i]; gradient=ctx.createRadialGradient(ball.x,ball.y,0,ball.x,ball.y,ball.radius); gradient.addColorStop(0.3,ball.innerColor); gradient.addColorStop(0.5,ball.middleColor); gradient.addColorStop(1.0,ball.outerColor); ctx.save(); ctx.beginPath(); ctx.arc(ball.x,ball.y,ball.radius,0,Math.PI*2,false); ctx.fillStyle=gradient; ctx.strokeStyle=ball.strokeStyle; ctx.fill(); ctx.stroke(); ctx.restore(); } } function animate(){ if(!paused){ update(); draw(); setTimeout( function(){ window.requestAnimationFrame(animate); /// 让浏览器自行决定帧速率 }, 0.10 * 1000 );// 延时执行 } } //--> </script>
2019年3月4日09点12分
最新文章
- chrome防止自动填充密码
- SQL 谜题(硬币的组合)
- delphi中exit,abort,break,continue 的区别
- vc++ 程序开机自启动和取消启动
- 理解 JS 回调函数中的 this
- 学习配置vsftp 进行ftp文件的传输
- java web 插件式开发
- 第1部分: 游戏引擎介绍, 渲染和构造3D世界
- Cubietruck查看CPU及硬盘温度
- 主流存储引擎详解:Innodb,Tokudb、Memory、MYISAM、Federated
- hdu 3062 2-sat入门题
- TensorFlow 深度学习笔记 TensorFlow实现与优化深度神经网络
- Android开发之ExpandableListView扩展(BaseExpandableListAdapter的使用)(完整版)
- linux下维护服务器之常用命令
- 对DataTable(或者DataSet)修改后,提交修改到数据库
- 通过 Spark R 操作 Hive
- Python- 解决PIP下载安装速度慢 让PIP源使用国内镜像,提升下载速度和安装成功率。
- 【Java面试题】1 Java中使用switch-case的用法及注意事项超全总结
- Spring定时器Quartz的用法
- keepalived结合lvs
热门文章
- STM32F4: Generating parallel signals with the FSMC
- [Go] 编码规范
- 如何用visio(word)绘制图片表格
- 添加Godaddy二级域名子域名方法
- Revit API封装一个通用函数“过名称找元素”
- Javascript中的依赖注入
- java的异常和java web容器的异常
- iPhone开发--正则表达式获取字符串中的内容
- Safari支不支持HTML5录音? 现在浏览器中最好的解决方案是WebRTC下的 navigator.getUserMedia API。
- Java 文件路径相关