以下是源码: 复制代码 代码如下: 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 nimo = {<br /> aniamted: null,<br /> content: null,<br /> data: {<br /> radiusRange: [5, 20],<br /> speedRange: [-5, 5],<br /> scrollHeight: null,<br /> scrollWdith: null<br /> },<br /> balls: [],<br /> ele: {<br /> canvas: null<br /> },<br /> fn: {<br /> creatRandom: function (startInt, endInt) {//生产随机数<br /> var iResult;<br /> iResult = startInt + (Math.floor(Math.random() * (endInt - startInt + 1)));<br /> return iResult<br /> },<br /> init: function () {<br /> nimo.data.scrollWdith = document.body.scrollWidth;<br /> nimo.data.scrollHeight = document.body.scrollHeight;<br /> nimo.ele.canvas = document.getElementById('canvas-ke'+'leyi-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: function () {<br /> var aRandomColor = [];<br /> aRandomColor.push(nimo.fn.creatRandom(0, 255));<br /> aRandomColor.push(nimo.fn.creatRandom(0, 255));<br /> aRandomColor.push(nimo.fn.creatRandom(0, 255));<br /> var iRandomRadius = nimo.fn.creatRandom(nimo.data.radiusRange[0], nimo.data.radiusRange[1]);<br /> var oTempBall = {<br /> coordsX: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.width - iRandomRadius),<br /> coordsY: nimo.fn.creatRandom(iRandomRadius, nimo.ele.canvas.height - iRandomRadius),<br /> radius: iRandomRadius,<br /> bgColor: 'rgba(' + aRandomColor[0] + ',' + aRandomColor[1] + ',' + aRandomColor[2] + ',0.5)'<br /> };<br /> oTempBall.speedX = nimo.fn.creatRandom(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.creatRandom(nimo.data.speedRange[0], nimo.data.speedRange[1]);<br /> nimo.balls.push(oTempBall)<br /> },<br /> drawBall: function (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);<br /> 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 /> run: function () {<br /> nimo.fn.drawBall();<br /> nimo.aniamted = setTimeout(function () {<br /> nimo.fn.drawBall();<br /> nimo.aniamted = setTimeout(arguments.callee, 10)<br /> }, 10)<br /> },<br /> stop: function () {<br /> clearTimeout(nimo.aniamted)<br /> }<br /> }<br /> }<br /> window.onload = function () {<br /> nimo.fn.init();<br /> var i;<br /> for (var i = 0; i < 10; i++) {<br /> nimo.fn.addBall();<br /> }<br /> nimo.fn.run();<br /> document.getElementById('stop-kel'+'eyi-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-k'+'eleyi-com').onclick = function () {<br /> var i;<br /> for (var i = 0; i < 10; i++) {<br /> nimo.fn.addBall();<br /> }<br /> nimo.fn.drawBall(true);<br /> }<br /> }<br />