昂首那瞬间，球已停止转动——HTML5实现3D球效果
分类：HTML52012-04-08 17:11 2014人阅读评论(8) 收藏举报本文乃原创demo，转载请注明出处：
blog.csdn/qingfeilee/article/details/7437972，使用代码请保留作者署名，谢谢！
曲终人即散，每当看到这个词汇总是略感的伤感。现在的我们周围的生活节奏是如此之快，尤其是生活在北京这个
经济高速发展的地方。有时曲可能尚未终，可是人已经散！当我们下班后漫步在繁华都市的夜幕之下，总是略感孤独和伤感。或许是由于工作压力，也或许是因为亲人爱人不在身边，更或许是自己的心一次次的被冲击。京城周末的夜晚丝毫没有因为是夜晚而变得静谧，而我总是急匆匆的上了回家的夜班车。或许我应该停下脚步去聆听、去感受、去享受，但是我却不到一个这样的地方，唯独小区里的那张长长的木椅。喧嚣的夜幕总是让我想起电视上看见的迪厅里悬挂的那个水晶球，如此的耀眼，如此的抢眼。人们在球的衬托下排遣着自己的疲惫，宣泄着自己的寂寞，放纵着自己的形态……
作为IT小生制造那支能够在头顶上旋转的球有一定难度，但可以让其在电脑中为人们表演。
这篇博客描述的是如何实现一个3D球的效果，主要是通过HTML5里面的canvas来实现。整片文章属于原创若有相同纯属有缘，在做这个效果之前简略的学习了一下《3D数学基
础》收获颇丰，因为大学里面学的数学基本上都还给了老师。闲话少说，先看实现的效果如图一：
图一
图二
这里为什么要设定一个2秒冻结，因为如果立刻冻结的话整个求的样式就无法及时改变所以就采取了这样一个迂回之策。详见代码如下：
[html]view plainc opy
1.<html>
2.<head>pdf转html
3.<title>
4.再回首，那只小球已停止转动——HTML5实现3D球效果
5.</title>
6.<meta charse t="utf-8">
7.<styletype="text/css">
8. #box{
9. border:2px solid#f60; margin:0 auto;
10. }
11.</style>
12.<script>
13. var spaceX = 30; //X方向的密度
14. var spaceY = 30; //Y方向的密度
15. var PI = Math.PI; //数学角度π
16. var radius = 200; //球的半径
17. var radian = PI / 180; //弧度
18. var speedX = 0; //X方向的速度
19. var speedY = 0; //Y方向的速度
20. var offset X = 300; //X方向的偏移量相当于将球的中心X坐标移之到画
布中央
21. var offset Y = 300; //Y方向的偏移量相当于将球的中心Y坐标移之到画
布中央
22. var sphere s = new Array(); //存储像素点
23. var canvas; //画布
24. var contex t; //上下文
25. var focalL ength = 300; //控制球距离屏幕的距离
26. var start= true; //是否启动
27. var sx = 0; //sinx
28. var cx = 0; //cosx
29. var sy = 0; //siny
30. var cy = 0; //cosy
31. var sz = 0; //sinz
32. var cz = 0; //cosz
33. var innerS taCol or = "GREEN"; //表示内部颜
34. var outerS taCol or = "RED"; //外部颜
35. var object Radiu s = 10; //绘制原点半径
36. var scaleR atio= 0;
37.
38. var camera View= {
39. x: 0,
40. y: 0,
41. z: 0,
42. rotX: 0,
43. rotY: 0,
发布评论