以下是源码：
<!doctype html>
<html>
<head>
<title>HTML5 随机弹跳的小球</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>HTML5特效 随机弹跳的小球</h1>
<div>请使用支持HTML5的浏览器开打本页。 <button id=”stop-keleyi-com”>暂停</button>
<button id=”run-keleyi-com”>继续</button>
<button id=”addBall-keleyi-com”>增加小球</button> <button onclick=”javascript:window.location.reload();”>刷新</button>
<br />每次刷新页面的小球大小，颜色，运动路线，都是新的，可以点击上面各个按钮看看效果。
</div>
<canvas id=”canvas-keleyi-com” >
</canvas>
<script type=”text/javascript” src=”http://keleyi.com/keleyi/pmedia/jquery/jquery-1.11.0.min.js”></script>
<script type=”text/javascript”>
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-ke’+’leyi-com’);
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),
