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市场环境所提供的创业机会是客观的，但还必须具备自身的创业优势，才能使我们的创业项目成为可行。作为大学生的我们所具有的优势在于：据调查，大学生对此类消费的态度是：手工艺制品消费比“负债”消费更得人心。朋友推荐 宣传广告 逛街时发现的 上网400-500元1326%（四）大学生对手工艺制品消费的要求 仅仅看代码可能一时半会看不出端倪，下面将这块儿的几何图形贴上供参考，由于非常外行所以图形画的比较粗糙，如下图三：公司还组织各国的“芝自制饰品店”定期进行作品交流，体现东方女性聪慧的作品曾在其他国家大受欢迎；同样，自各国作品也曾无数次启发过中国姑娘们的灵感，这里更是创作的源泉。民族性手工艺品。在饰品店里，墙上挂满了各式各样的小饰品，有最普通的玉制项链、珍珠手链，也有特别一点如景泰蓝的手机挂坠、中国结的耳坠，甚至还有具有浓郁的异域风情的藏族饰品。图三价格便宜些 服务热情周到 店面装饰有个性 商品新颖多样通过上面的图形我们很容易得出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。 由代码注释较详细，具体就不再赘述。哪位大牛有好的算法实现希望能够多多交流，共同学习，共同进步，欢迎拍砖。在上海， 随着轨道交通的发展，地铁商铺应运而生，并且在重要商圈已经形成一定的气候，投资经营地铁商铺逐渐为一大热门。在人民广场地下的迪美购物中心，有一家DIY自制饰品店-“碧芝自制饰品店” 本文乃原创demo，转载请注明出处：http:/blog.csdn.ne