JS实现随机乱撞彩色圆球特效的方法


Posted in Javascript onMay 05, 2015

本文实例讲述了JS实现随机乱撞彩色圆球特效的方法。分享给大家供大家参考。具体实现方法如下:

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JS实现的随机乱撞的彩色圆球特效代码</title>
 <style>
 body{
 font-family: 微软雅黑; 
 }
 body,h1{
 margin:0;
 }
 canvas{
 display:block;margin-left: auto;margin-right: auto;
 border:1px solid #DDD; 
 background: -webkit-linear-gradient(top, #222,#111);
 } 
 </style>
</head>
<body>
 <h1>JS实现的随机乱撞的彩色圆球特效代码</h1>
<canvas id="canvas" >
</canvas>
<button id="stop">stop</button>
<button id="run">run</button>
<button id="addBall">addBall</button>
<script src="jquery-1.6.2.min.js"></script>
<script>
var nimo={
 aniamted:null,
 content:null,
 data:{
 radiusRange:[5,20],
 speedRange:[-5,5],
 scrollHeight:null,
 scrollWdith:null
 },
 balls:[],
 ele:{
 canvas:null 
 },
 fn:{
 creatRandom:function(startInt,endInt){//生产随机数
  var iResult; 
  iResult=startInt+(Math.floor(Math.random()*(endInt-startInt+1)));
  return iResult
 },
 init:function(){
  nimo.data.scrollWdith=document.body.scrollWidth;
  nimo.data.scrollHeight=document.body.scrollHeight;
  nimo.ele.canvas=document.getElementById('canvas'); 
  nimo.content=nimo.ele.canvas.getContext('2d');  
  nimo.ele.canvas.width=nimo.data.scrollWdith-50;
  nimo.ele.canvas.height=nimo.data.scrollHeight-100;
 },
 addBall:function(){
  var aRandomColor=[];
  aRandomColor.push(nimo.fn.creatRandom(0,255));
  aRandomColor.push(nimo.fn.creatRandom(0,255));
  aRandomColor.push(nimo.fn.creatRandom(0,255)); 
  var iRandomRadius=nimo.fn.creatRandom(nimo.data.radiusRange[0],nimo.data.radiusRange[1]);
  var oTempBall={
  coordsX:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.width-iRandomRadius),
  coordsY:nimo.fn.creatRandom(iRandomRadius,nimo.ele.canvas.height-iRandomRadius),
  radius:iRandomRadius,  
  bgColor:'rgba('+aRandomColor[0]+','+aRandomColor[1]+','+aRandomColor[2]+',0.5)'  
  }; 
  oTempBall.speedX=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);
  if(oTempBall.speedX===0){
  oTempBall.speedX=1
  }
  if(oTempBall.speedY===0){
  oTempBall.speedY=1
  }
  oTempBall.speedY=nimo.fn.creatRandom(nimo.data.speedRange[0],nimo.data.speedRange[1]);
  nimo.balls.push(oTempBall)
 },
 drawBall:function(bStatic){  
  var i,iSize;
  nimo.content.clearRect(0,0,nimo.ele.canvas.width,nimo.ele.canvas.height)
  for(var i=0,iSize=nimo.balls.length;i<iSize;i++){
  var oTarger=nimo.balls[i];  
  nimo.content.beginPath();
  nimo.content.arc(oTarger.coordsX,oTarger.coordsY,oTarger.radius,0,10);
  nimo.content.fillStyle=oTarger.bgColor;  
  nimo.content.fill();
  if(!bStatic){
   if(oTarger.coordsX+oTarger.radius>=nimo.ele.canvas.width){
   oTarger.speedX=-(Math.abs(oTarger.speedX))
   }
   if(oTarger.coordsX-oTarger.radius<=0){
   oTarger.speedX=Math.abs(oTarger.speedX)
   }
   if(oTarger.coordsY-oTarger.radius<=0){
   oTarger.speedY=Math.abs(oTarger.speedY)
   }
   if(oTarger.coordsY+oTarger.radius>=nimo.ele.canvas.height){
   oTarger.speedY=-(Math.abs(oTarger.speedY))
   }
   oTarger.coordsX=oTarger.coordsX+oTarger.speedX;
   oTarger.coordsY=oTarger.coordsY+oTarger.speedY;  
  }  
  }
 },
 run:function(){
  nimo.fn.drawBall();
  nimo.aniamted=setTimeout(function(){
  nimo.fn.drawBall();
  nimo.aniamted=setTimeout(arguments.callee,10)
  },10)
 },
 stop:function(){
  clearTimeout(nimo.aniamted)
 }
 }
}
window.onload=function(){
 nimo.fn.init();
 var i;
 for(var i=0;i<10;i++){
 nimo.fn.addBall();
 }
 nimo.fn.run();
 document.getElementById('stop').onclick=function(){
 nimo.fn.stop()
 }
 document.getElementById('run').onclick=function(){
 nimo.fn.stop()
 nimo.fn.run()
 }
 document.getElementById('addBall').onclick=function(){
 var i;
 for(var i=0;i<10;i++){
  nimo.fn.addBall(); 
 }
 nimo.fn.drawBall(true);
 }
}
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 面向对象,实现namespace,class,继承,重载
Oct 29 Javascript
js textarea自动增高并隐藏滚动条
Dec 16 Javascript
简略的前端架构心得&amp;&amp;基于editor为例子的编码小技巧
Nov 25 Javascript
用javascript模仿ie的自动完成类似自动完成功的表单
Dec 12 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
js实现(全选)多选按钮的方法【附实例】
Mar 30 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
Jul 18 jQuery
微信小程序实现传递多个参数与事件处理
Aug 12 Javascript
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
jquery实现图片随机排列的方法
May 04 #Javascript
jquery实现的美女拼图游戏实例
May 04 #Javascript
jQuery实现仿Alipay支付宝首页全屏焦点图切换特效
May 04 #Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 #Javascript
jQuery消息提示框插件Tipso
May 04 #Javascript
jquery实现多屏多图焦点图切换特效的方法
May 04 #Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
May 04 #Javascript
You might like
ECshop 迁移到 PHP7版本时遇到的兼容性问题
2016/02/15 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
浅谈javascript面向对象程序设计
2015/01/21 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
2016/08/01 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
基于Vue的延迟加载插件vue-view-lazy
2018/05/21 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
2018/08/31 Javascript
vue-router启用history模式下的开发及非根目录部署方法
2018/12/23 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
Node.js Domain 模块实例详解
2020/03/18 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python实现扫描日志关键字的示例
2018/04/28 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python内置random模块生成随机数的方法
2019/05/31 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
关于sys.stdout和print的区别详解
2019/12/05 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
Python基于smtplib模块发送邮件代码实例
2020/05/29 Python
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
医学生自我鉴定范文
2013/11/08 职场文书
团日活动总结范文
2014/04/25 职场文书
2014年团委工作总结
2014/11/13 职场文书
挂职锻炼工作总结2015
2015/05/28 职场文书
HR必备:销售经理聘用合同范本
2019/08/21 职场文书
俄罗斯十大城市人口排名,第三首都仅排第六,第二是北方首都
2022/03/20 杂记