HTML5实现3D球效果.doc

HTML5实现3D球效果 曲终人即散，每当看到这个词汇总是略感的伤感。现在的我们周围的生活节奏是如此之快，尤其是生活在北京这个经济高速发展的地方。有时曲可能尚未终，可是人已经散！当我们下班后漫步在繁华都市的夜幕之下，总是略感孤独和伤感。或许是由于工作压力，也或许是因为亲人爱人不在身边，更或许是自己的心一次次的被冲击。京城周末的夜晚丝毫没有因为是夜晚而变得静谧，而我总是急匆匆的上了回家的夜班车。或许我应该停下脚步去聆听、去感受、去享受，但是我却找不到一个这样的地方，唯独小区里的那张长长的木椅。喧嚣的夜幕总是让我想起电视上看见的迪厅里悬挂的那个水晶球，如此的耀眼，如此的抢眼。人们在球的衬托下排遣着自己的疲惫，宣泄着自己的寂寞，放纵着自己的形态 作为IT小生制造那支能够在头顶上旋转的球有一定难度，但可以让其在电脑中为人们表演。 这篇博客描述的是如何实现一个3D球的效果，主要是通过HTML5里面的canvas来实现。整片文章属于原创若有相同纯属有缘，在做这个效果之前简略的学习了一下3D数学基础收获颇丰，因为大学里面学的数学基本上都还给了老师。闲话少说，先看实现的效果如图一：图一 要想使得整个球动起来，需要先激活。然后再改变他的旋转方向或者改变这个小球的半径。看启动后的效果，如图二：图二 这里为什么要设定一个2秒冻结，因为如果立刻冻结的话整个求的样式就无法及时改变所以就采取了这样一个迂回之策。详见代码如下：再回首，那只小球已停止转动HTML5实现3D球效果 #box border:2px solid #f60; margin:0 auto; var spaceX = 30; /X方向的密度var spaceY = 30; /Y方向的密度var PI = Math.PI; /数学角度var radius = 200; /球的半径var radian = PI / 180; /弧度var speedX = 0; /X方向的速度var speedY = 0; /Y方向的速度var offsetX = 300; /X方向的偏移量相当于将球的中心X坐标移之到画布中央var offsetY = 300; /Y方向的偏移量相当于将球的中心Y坐标移之到画布中央var spheres = new Array(); /存储像素点var canvas; /画布var context; /上下文var focalLength = 300; /控制球距离屏幕的距离var start = true; /是否启动var sx = 0; /sinxvar cx = 0; /cosxvar sy = 0; /sinyvar cy = 0; /cosyvar sz = 0; /sinzvar cz = 0; /coszvar innerStaColor = GREEN; /表示内部颜色var outerStaColor = RED; /外部颜色var objectRadius = 10; /绘制原点半径var scaleRatio = 0;var cameraView = x: 0,y: 0,z: 0,rotX: 0,rotY: 0,rotZ: 0; /视角角度/*author:qingfeileedate:2012-03-28description:初始化系统画布信息*/function initCanvas() try canvas = document.getElementById(sphere);context = canvas.getContext(2d);catch(e) document.getElementById(tip_info).innerHTML = 您的浏览器不支持！; /*author:qingfeileedate:2012-03-28description:初始化小球实体*/function initSphere() for (var i = spaceY; i 180; i += spaceY) for (var angle = 0; angle .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; /*author:qingfeileedate:2012-03-28description:冻结/激活真个大球状态*/function startOrPause() if (start) setTimeout(function() start = false;,2000);document.getElementById(swi).innerHTML = 激活;innerStaColor = GREEN;outerStaColor = RED; else start = true;document.getElementById(swi).innerHTML = 2秒后冻结;innerStaColor = RED;outerStaColor = GREEN;/*author:qingfeileedate:2012-03-28description:改变球的大小*/function changeObjectRadius(val) this.objectRadius = val;window.addEventListener(load, init, true); 激活向东向西向南向北小球大小：详情见阿飞blog 仅仅看代码可能一时半会看不出端倪，下面将这块儿的几何图形贴上供参考，由于非常外行所以图形画的比较粗糙，如下图三：图三通过上面的图形我们很容易得出initSphere函数里面的一些计算。这样就可以将球的各个点进行了初始化。 然后就是旋转，我们以绕Y轴旋转为例。假设当前时刻某点P（X,Y,Z）绕Y轴旋转度，到P1（X1,Y1,Z1）这两者有何关系呢？不再赘述直接给出公式：X1 = X*cos + Z*sin；Y1 = Y；Z1=-X*sin+Z*cos不懂的复习一下高等书写，O(_)O哈哈。绕其他轴旋转同理，这样就得到了update方法里面的算法。当然在3D中还存在一个视角角度，就相当于摄像机一样，本例子中默认是是0，0，0。 由代码注释较详细，具体就不再赘述。哪位大牛有好