HTML5实现3D球效果

mixer_b

  本文乃原创demo，转载请注明出处：http://blog.csdn.net/qingfeilee/article/details/7437972，使用代码请保留作者署名，谢谢！

    曲终人即散，每当看到这个词汇总是略感的伤感。现在的我们周围的生活节奏是如此之快，尤其是生活在北京这个经济高速发展的地方。有时曲可能尚未终，可是人已经散！当我们下班后漫步在繁华都市的夜幕之下，总是略感孤独和伤感。或许是由于工作压力，也或许是因为亲人爱人不在身边，更或许是自己的心一次次的被冲击。京城周末的夜晚丝毫没有因为是夜晚而变得静谧，而我总是急匆匆的上了回家的夜班车。或许我应该停下脚步去聆听、去感受、去享受，但是我却找不到一个这样的地方，唯独小区里的那张长长的木椅。喧嚣的夜幕总是让我想起电视上看见的迪厅里悬挂的那个水晶球，如此的耀眼，如此的抢眼。人们在球的衬托下排遣着自己的疲惫，宣泄着自己的寂寞，放纵着自己的形态……
   作为IT小生制造那支能够在头顶上旋转的球有一定难度，但可以让其在电脑中为人们表演。
   这篇博客描述的是如何实现一个3D球的效果，主要是通过HTML5里面的canvas来实现。整片文章属于原创若有相同纯属有缘，在做这个效果之前简略的学习了一下《3D数学基础》收获颇丰，因为大学里面学的数学基本上都还给了老师。闲话少说，先看实现的效果如图一：

图一
    要想使得整个球动起来，需要先激活。然后再改变他的旋转方向或者改变这个小球的半径。看启动后的效果，如图二：


图二


    这里为什么要设定一个2秒冻结，因为如果立刻冻结的话整个求的样式就无法及时改变所以就采取了这样一个迂回之策。详见代码如下：
 
<div style="overflow: auto; font-family: Consolas,'Courier New',Courier,mono,serif; font-size: 12px; background-color: #ffffff; width: 1044px; padding-top: 1px; color: #000000; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 26px; text-align: left; text-indent: 0px; white-space: normal;" class="dp-highlighter bg_html"><div style="padding-left: 45px;" class="bar"><div style="border-left: 3px solid #6ce26c; padding: 3px 8px 10px 10px; font-family: Verdana,Geneva,Arial,Helvetica,sans-serif; font-size: 9px; font-style: normal; font-variant: normal; font-weight: normal; line-height: normal; color: silver; background-color: #f8f8f8;" class="tools">[html] view plaincopy<div style="width: 18px; height: 18px;">