基于HTML5的动态数据3D网页的需求规格说明书.docx

基于HTML5的动态数据3D网页的需求规格说明书 Canvas sphere Sphere = (function() var canvas;var ctx;var offsetX = 300;var offsetY = 300;var objectsInScene = new Array();var focalLength = 300;var cameraView = x:0, y:0, z:0, rotX:0, rotY:0, rotZ:0;var space = 15;var PI = Math.PI;var radius = 200;var radian = PI/180;var mouseX = 0;var mouseY = 0;var objectRadius = 14;var scaleRatio = 0;var scaling = true;var nrOfFollowers = 32;var followRadius = 8;var minDistToLeader = 20;var sx = 0;var cx = 0;var sy = 0;var cy = 0;var sz = 0;var cz = 0;return function() this.createSphere = function() canvas = document.getElementById(sphere);ctx = canvas.getContext(2d);if (canvas.getContext) this.init();this.init = function() / create sphere objects:for (var i=space; i180; i+=space) for (var angle=0; angle360; angle+=space) 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;object.type = sphere;objectsInScene.push(object);/ create followers:for(var i=0; i .5) object.glow -= .02;var radgrad = ctx.createRadialGradient(offsetX+object.x*scaleRatio, offsetY+object.y*scaleRatio, scale*.5, offsetX+object.x*scaleRatio, offsetY+object.y*scaleRatio, scale*objectRadius*.5);radgrad.addColorStop(0, #8484d7);radgrad.addColorStop(object.glow, #00008f);radgrad.addColorStop(1, rgba(0,0,143,0);ctx.fillStyle = radgrad;ctx.fillRect(offsetX+object.x*scaleRatio-scale*objectRadius*.5, offsetY+object.y*scaleRatio-scale*objectRadius*.5, scale*objectRadius, scale*objectRadius);/ display a follow object:this.displayFollower = function(object) / calculate distance to leadervar distx = object.x - object.leader.x;var disty = object.y - object.leader.y;var distz = object.z - object.leader.z;/ recalculate momentumobject.momentumx -= Math.min(50, distx) / 100;object.momentumy -= Math.min(50, disty) / 100;object.momentumz -= Math.min(50, distz) / 100;/ dampen the momentum a littleobject.momentumx *= 0.85;object.momentumy *= 0.85;object.momentumz *= 0.85;/ change positionobject.x += object.momentumx;object.y += object.momentumy;object.z += object.momentumz;/ render to screenscaleRatio = focalLength/(focalLength + object.z);switch(scaling) case true:scale = scaleRatio;break;case false:scale = 1;break;var radgrad = ctx.createRadialGradient(offsetX+object.x*scaleRatio, offsetY+object.y*scaleRatio, scale*.5, offsetX+object.x*scaleRatio, offsetY+object.y*scaleRatio, scale*followRadius*.5);radgrad.addColorStop(0, #3f3f57);radgrad.addColorStop(0.5, #3f3f57);radgrad.addColorStop(1, rgba(60,60,90,0);ctx.fillStyle = radgrad;ctx.fillRect(offsetX+object.x*scaleRatio-scale*followRadius*.5, offsetY+object.y*scaleRatio-scale*followRadius*.5, scale*followRadius, scale*followRadius);/ assign new leader when coming to close the current leader:if(distxminDistToLeader & distyminDistToLeader & distzminDistToLeader) object.l