先前在博客园看过Waxes同学在博客园做的3D球的Demo,地址在这
把他的Demo pull了下面,很多数学公式,即便在他的博客园里也有两个公式无法解释。因此,这里就写一篇自己思路的文章,教大家如何用canvas画一个3D球。
效果如下
第一步:画球
如何设置球上的点?
我的思路是: 给这个球画上经纬线。
这里画一个草图
需要注意的有经线和纬线之间的间隔必须是一致。最简单的方案就是以角度划分了。也就是A到B, B到C的距离必须是一样的,因为它们在不同纬度上的角度不同,即 ∠AoC = ∠AoB
代码很好写,我们试着写一下。
第一部分先画不同纬度的圆周,注意要分z的上下限。
var LayerBallNum = 360 / 30, // 横向圆周个数
LayerIntervalUp = 360 / 30; //纵向
var Animation = function(){
this.init();
};
Animation.prototype = {
isrunning: false,
init: function () {
var num = LayerIntervalUp / 2; //layer 的数目 画上半球 下半球<