SOURCE

var canvas = document.getElementById('canvas');
	var H = 300,W = 500;
	canvas.height = H;
	canvas.width = W;

	var Num = 30;
	//小球个数

	btn.onclick = function(){history.go();}

	var balls = [];

	function getBalls(){
		var cxt = canvas.getContext('2d');
		for (var i = 0; i < Num; i++) {
			var tempR = (Math.random()*255)|0;
			var tempG = (Math.random()*255)|0;
			var tempB = (Math.random()*255)|0;

			var tempColor = 'rgb(' +tempR+','+tempG +','+tempB+')';
			//填充物体的颜色
			//随机的小球颜色
			
			var posiR = (Math.random()*30+20)|0;//半径?
			var posiX = (Math.random()*(W-posiR))|0;
			var posiY = (Math.random()*(H-posiR))|0;
			//圆的横纵坐标和半径
			

			var tempBall = {
				x:posiX,
				y:posiY,
				r:posiR,
				stepX:(Math.random()*13-6)|0,// 运动方向
				stepY:(Math.random()*13-6)|0,//?
				color:tempColor
			}

			balls[balls.length] = tempBall;


		}
	}
	var bumpTest = function(ele){
		 //左侧
	    if(ele.x <= ele.r){
	        ele.x = ele.r;
	        ele.stepX = -ele.stepX;
	    }
	    //右侧
	    if(ele.x >= W - ele.r){
	        ele.x = W - ele.r;
	        ele.stepX = -ele.stepX;
	    }
	    //上侧
	    if(ele.y <= ele.r){
	        ele.y = ele.r;
	        ele.stepY = -ele.stepY;
	    }
	    //下侧
	    if(ele.y >= H - ele.r){
	        ele.y = H - ele.r;
	        ele.stepY = -ele.stepY;
	    }
	}

	var updateBalls = function (){
		var i = balls.length;
		while(i--){
			balls[i].x += balls[i].stepX;
	        balls[i].y += balls[i].stepY; 
	        bumpTest(balls[i]); 
		}
	}

	var renderBalls = function (){
		canvas.height = H;
		//重置画布高度,可以清空画布
		//
		
		var cxt = canvas.getContext('2d');
		var i = balls.length;

		while(i--){

			cxt.beginPath();

			cxt.arc(balls[i].x,balls[i].y,balls[i].r,0,2*Math.PI);

			cxt.fillStyle = balls[i].color;

 			cxt.globalCompositeOperation = 'lighter';

			cxt.closePath();//?
			//创建从当前点到起始点的路径

			cxt.fill();
		}
	}

	getBalls();//创建各个小球的初始状态;

	// renderBalls();
	clearInterval(oTimer);

	var oTimer = setInterval(function(){
		updateBalls();

		renderBalls();
	},50)

<canvas id="canvas" style="border:1px solid #ddd;width: 500;height: 300"></canvas>
<button id="btn">刷新</button>