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

本文实例讲述了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程序设计有所帮助。