SOURCE

var spaceX = 30; //X方向的密度
		var spaceY = 30; //Y方向的密度
		var PI = Math.PI; //数学角度π
		var radius = 150; //球的半径
		var radian = PI / 180; //弧度
		var speedX = 150; //X方向的速度
		var speedY = 50; //Y方向的速度
		var offsetX = 250; //X方向的偏移量相当于将球的中心X坐标移之到画布中央
		var offsetY = 250; //Y方向的偏移量相当于将球的中心Y坐标移之到画布中央
		var spheres = new Array(); //存储像素点
		var canvas; //画布
		var context; //上下文
		var focalLength = 250; //控制球距离屏幕的距离
		var start = true; //是否启动
		var sx = 0; //sinx
		var cx = 0; //cosx
		var sy = 0; //siny
		var cy = 0; //cosy
		var sz = 0; //sinz
		var cz = 0; //cosz
		var innerStaColor = "rgba(234, 97, 44, 0.5)"; //表示内部颜色
		var outerStaColor = "rgba(230, 76, 52, 0.5)"; //外部颜色
		var objectRadius = 8; //绘制原点半径
		var scaleRatio = 0;

		var cameraView = {
			x: 0,
			y: 0,
			z: 0,
			rotX: 0,
			rotY: 0,
			rotZ: 0
		}; //视角角度
		/**
		author:qingfeilee
		date:2012-03-28
		description:初始化系统画布信息
	**/
		function initCanvas() {
			try{ 
				canvas = document.getElementById("sphere");
				context = canvas.getContext("2d");
			}catch(e){
				 document.getElementById("tip_info").innerHTML = "您的浏览器不支持！";  
			}
		}
		/**
		author:qingfeilee
		date:2012-03-28
		description:初始化小球实体
	**/
		function initSphere() {
			for (var i = spaceY; i < 180; i += spaceY) {
				for (var angle = 0; angle < 360; angle += spaceX) {
					var object = {};
					var x = Math.sin(radian * i) * radius;

					object.x = Math.cos(angle * radian) * x;
					object.y = Math.cos(radian * i) * radius;
					object.z = Math.sin(angle * radian) * x;
					object.glow = .5; //亮度的范围
					spheres.push(object);
				}
			}
		}
		/**
		author:qingfeilee
		date:2012-03-28
		description:初始化系统函数
	**/
		function init() {
			initCanvas();
			initSphere();
			setInterval(this.update, 10, this);
		}
		function update() {
			if (start) {
				setParam();
			}
		}
		/**
		author:qingfeilee
		date:2012-03-28
		description:设置各个小球的属性
	**/
		function setParam() {
			//根据速度大小计算出一次旋转的角度大小
			var rotYstep = speedX / 10000;
			var rotXstep = speedY / 10000;

			cameraView.rotY = rotYstep;
			cameraView.rotX = -rotXstep;
			//计算出对应的cos和sin
			sx = Math.sin(cameraView.rotX);
			cx = Math.cos(cameraView.rotX);
			sy = Math.sin(cameraView.rotY);
			cy = Math.cos(cameraView.rotY);
			sz = Math.sin(cameraView.rotZ);
			cz = Math.cos(cameraView.rotZ);

			// 设置画布的效果
			context.fillStyle = 'rgba(0, 0, 0, 0.1)';
			context.fillRect(0, 0, canvas.width, canvas.height);

			var l = spheres.length - 1;

			for (var i = l,
			obj; obj = spheres[i]; i--) {
				render(obj);
			}
		}
		/**
		author:qingfeilee
		date:2012-03-28
		description:渲染整个画布
	**/
		function render(object) {
			var xy, xz, yx, yz, zx, zy;

			// 计算出物体的相对于照相机的位置
			var x = object.x - cameraView.x;
			var y = object.y - cameraView.y;
			var z = object.z - cameraView.z;
			
			// 绕X轴旋转
			xy = cx * y - sx * z;
			xz = sx * y + cx * z;
			// 绕Y轴旋转
			yz = cy * xz - sy * x;
			yx = sy * xz + cy * x;
			// 绕Z轴旋转
			zx = cz * yx - sz * xy;
			zy = sz * yx + cz * xy;
			//给各个球重新定位
			object.x = zx;
			object.y = zy;
			object.z = yz;

			//根据z轴数据来缩放球
			scaleRatio = focalLength / (focalLength + yz);
			scale = scaleRatio;

			if (object.glow > .5) {
				object.glow -= .02;
			}

			var sphereStyle = context.createRadialGradient(offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, 
			scaleRatio * .5, offsetX + object.x * scaleRatio, offsetY + object.y * scaleRatio, scaleRatio * objectRadius * .5);
			sphereStyle.addColorStop(0, innerStaColor);
			sphereStyle.addColorStop(object.glow, outerStaColor);
			sphereStyle.addColorStop(1, 'rgba(0,0,0,0)');

			context.fillStyle = sphereStyle;
			context.fillRect(offsetX + object.x * scaleRatio - scaleRatio * objectRadius * .5, 
			offsetY + object.y * scaleRatio - scaleRatio * objectRadius * .5, scaleRatio * objectRadius, scaleRatio * objectRadius);
			 document.getElementById("tip_info").innerHTML = "当前速度："+speedX+"  "+ speedY+"   小球半径："+objectRadius;  
			
		}
		window.addEventListener("load", init, true);

<canvas id="sphere" width="500" height="500"></canvas>
<a id="tip_info"></a>

* { margin: 0; padding: 0; }
#sphere { width: 500px; display: block; }