소스코드는 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. HTML5 随机弹跳的小球 <br> body{<br> font-family: 微软雅黑; <br> }<br> body,h1{<br> margin:0;<br> }<br> canvas{<br> display:block;margin-left: auto;margin-right: auto;<br> border:1px solid #DDD; <br> background: -webkit-linear-gradient(top, #222,#111);<br> } <br> HTML5特效 随机弹跳的小球 请使用支持HTML5的浏览器开打本页。 暂停 继续 增加小球 刷新 每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。 <br> var if = {<br> 제공됨: null,<br> 내용: null, <br> 데이터: {<br> radiusRange: [ 5 , 20 ] , <br> 속도 범위: [-5, 5],<br> 스크롤 높이: null, <br> scrollWdith : null <br> },<br> 공: [],<br> 즉: {<br> 캔버스: null<br> },<br> fn: {<br> createRandom : function ( startInt , endInt ) { // CreateRandom <br> var iResult;<br> iResult = startInt ( Math .floor ( Math .random () * ( endInt - startInt 1 )) ); iResult 반환<br> },<br> 초기화 : 함수 ( ) { <br> nimo .scrollWidth = 문서 .scrollWidth ; nimo .scrollHeight = 문서 .scrollHeight ; nimo.ele.canvas = document.getElementById('canvas-that' 'this-com');<br> nimo.content = nimo.ele.canvas.getContext('2d');<br> nimo.ele.canvas.width = nimo.data.scrollWdith - 50;<br> nimo.ele.canvas.height = nimo.data.scrollHeight -- 100;<br> },<br> addBall : 함수 ( ) { <br> var aRandomColor = [];<br> aRandomColor . push ( nimo . fn . createRandom ( 0 , 255 ) ); aRandomColor . push ( nimo . fn . createRandom ( 0 , 255 ) ); aRandomColor . push ( nimo . fn . createRandom ( 0 , 255 ) ); var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]);<br> var oTempBall = {<br> coordsX: nimo.fn.createRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius),<br> coordsY: nimo.fn.createRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius),<br> 반경: iRandomRadius,<br> bgColor: 'rgba(' aRandomColor[0] ',' aRandomColor[1] ',' aRandomColor[2] ',0.5)'<br> };<br> oTempBall.speedX = nimo.fn.createRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);<br> if ( oTempBall . speedX === 0 ) { <br> oTempBall.speedX = 1<br> }<br> if ( oTempBall . speedY === 0 ) { <br> oTempBall.speedY = 1<br> }<br> oTempBall.speedY = nimo.fn.createRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);<br> nimo.balls.push(또는TempBall)<br> },<br> drawBall : 함수( bStatic ) { <br> var i, iSize;<br> nimo .content .clearRect ( 0 , 0 , nimo . ele . canvas . width , nimo . ele . canvas . height ) <br> for ( var i = 0 , iSize = nimo .balls . length ; i < ; iSize ; i ) { <br> var oTarger = nimo.balls[i];<br> nimo.content.beginPath();<br> nimo .content .arc ( oTarger . coordsX , oTarger . coordsY , oTarger . radius , 0 , 10 ) nimo.content.fillStyle = oTarger.bgColor;<br> nimo.content.fill();<br> if ( !bStatic ) { <br> if ( oTarger . coordsX oTarger . radius > ;= nimo . ele . canvas . width ) { <br> oTarger .speedX = - ( Math . abs ( oTarger . speedX ) ) <br> }<br> if ( oTarger . coordsX -- oTarger . radius < ;= 0 ) { <br> oTarger.speedX = Math.abs(oTarger.speedX)<br> }<br> if ( oTarger . coordsY -- oTarger . radius < ;= 0 ) { <br> oTarger.speedY = Math.abs(oTarger.speedY)<br> }<br> if ( oTarger . coordsY oTarger . radius > ;= nimo . ele . canvas . height ) { <br> oTarger . speedY = -( Math . abs ( oTarger . speedY ) ) <br> }<br> oTarger.coordsX = oTarger.coordsX oTarger.speedX;<br> oTarger.coordsY = oTarger.coordsY oTarger.speedY;<br> }<br> }<br> },<br> 실행 : 함수 ( ) { <br> if.fn.drawBall();<br> nimo . 주어진 = setTimeout ( function ( ) { <br> if.fn.drawBall();<br> nimo . 주어진 = setTimeout ( 인수 . 호출 , 10 ) <br> }, 10)<br> },<br> 정지 : 기능 ( ) { <br> ClearTimeout( nimo . whatyougave ) <br> }<br> }<br> }<br> window .onload = 함수( ) { <br> nimo.fn.init();<br> var i;<br> for ( var i = 0 ; i < ; 10 ; i ) { <br> if.fn.addBall();<br> }<br> nimo.fn.run();<br> document.getElementById('stop-only' 'this-com').onclick = function() {<br> nimo.fn.stop()<br> }<br> document.getElementById('run-keley' 'i-com').onclick = function() {<br> nimo.fn.stop()<br> nimo.fn.run()<br> }<br> document.getElementById('addBall-this-com').onclick = function() {<br> var i;<br> for ( var i = 0 ; i < ; 10 ; i ) { <br> if.fn.addBall();<br> }<br> 니모 .fn .drawBall(참); }<br> }<br> <br> </본문><br> </div>
