canvas繪製3d球體

window.onload=function(){
   var R_init=500
    var Sum=360/10     //定義12個環形的圈圈
    var Sumy=360/10   //縱向也有12個圈圈
    var radius=2      //居中半徑
    var r_add=2       //半徑增量
    var scen=20        //視角長度
    var off=600      //canvas偏移
     var R=500/(scen+R_init)*500          //定義大圓半徑，隨着視角變大而變小
    
/**
*   獲取canvas對象
*/
    var can=document.getElementById("canvasId")
    var width=can.getAttribute("width")
    var height=can.getAttribute("height")
    var canvas=can.getContext("2d")
   // canvas.scale(1.2,1.2)
    canvas.lineWidth=1
    canvas.scale(2,2)
    /**
    *重寫數組方法
    */
     Array.prototype.forEach=function(callback){
        for(var i=0;i<this.length;i++){
            callback.call(this[i])
        }
            }
/**
* 定義一個球體對象
*/
    var Cube=function(points){
        this.points=points
    }
    Cube.prototype={
       _draw:function(){
           canvas.strokeStyle="#aaaaff"
            this.points.forEach(function(){
                canvas.beginPath()
                canvas.arc(this.x+off,this.y+off,this.radius,0,2*Math.PI)
                canvas.stroke()
            })
                
        },
        transform:function(angleX,angleY){
            canvas.clearRect(0,0,width,height)
            rotateY(this.points,angleY)
            rotateX(this.points,angleX)
            this._draw()
        },
        transformX:function(angleZ){
            canvas.clearRect(0,0,4000,3000)
            rotateX(this.points,angleZ)
            this._draw()
        }
        ,
        transformY:function(angleZ){
            canvas.clearRect(0,0,1000,1000)
            rotateY(this.points,angleZ)
            this._draw()
        },
        _print:function(){
            console.log(this.points.length)
        },
        _resizeCamera:function(){
            //重置視角,重置座標點,沒寫完
                       
        }
    }
    
    /**
    *  定義一些圓圈
    */
    var point = function(x,y,z,radius){
        this.x = x
        this.y = y
        this.z = z
        this.radius=radius
        this.changeZ=function(){
            this.z=0-this.z
            this.radius=radius+r_add*Math.sqrt(Math.pow(R+scen-this.z,2)+Math.pow(this.y,2))/(scen+R)
            return this
        }
    }
    //初始化球上面的圓圈
    function init(){
        var points=[]
        for(var i=0;i<Sum;i++){           //橫座標方向 12個 1
             for(var e=0;e<Sumy;e++){     //縱座標方向 12個 1
                    var x=Math.cos(i*Math.PI*2/Sum)*Math.sin(e*Math.PI*2/Sumy)*R
                    var y=Math.cos(e*Math.PI*2/Sumy)*R
                    var z=0
                    if((e/Sumy>.5)||(i/Sum)>.5){
                    z=0-Math.sqrt(Math.pow(R,2)-Math.pow(x,2)-Math.pow(y,2))
                    }else{
                    z=Math.sqrt(Math.pow(R,2)-Math.pow(x,2)-Math.pow(y,2))
                    }
                    var r=radius+r_add*Math.sqrt(Math.pow(R+scen-z,2)+Math.pow(y,2))/(scen+R)
                    console.log(x,y,z,r)
                    var p=new point(x,y,z,r)
                    points.push(p)
             }
         }
        return points
    }
    //沿着Z軸旋轉
    function rotateZ(points,angleY){
        var cos=Math.cos(angleY)
        var sin=Math.sin(angleY)
        points.forEach(function(){
            var x1=this.x*cos-this.y*sin
            var y1=this.y*cos+this.x*sin
            this.x=x1
            this.y=y1
        })
            }
    
    function rotateX(points,angleY){
        var cos=Math.cos(angleY)
        var sin=Math.sin(angleY)
        points.forEach(function(){
            var y1=this.y*cos-this.z*sin
            var z1=this.y*sin+this.z*cos
            this.y=y1
            this.z=z1
        })
            }
    
    function rotateY(points,angleY){
        var cos=Math.cos(angleY)
        var sin=Math.sin(angleY)
        points.forEach(function(){
            var z1=this.z*cos-this.x*sin
            var x1=this.z*sin+this.x*cos
            this.z=z1
            this.x=x1
        })
            }
   var pos=init()
   var c=new Cube(pos)
    //c._clone()
    c._draw()

    //鼠標事件,有點問題
   
        var x_=1000
        var y_=1000
        window.onmousemove=function(e){
        var rx=e.pageX
        var ry=e.pageY
        var deltaX=rx-x_
        var deltaY=ry-y_
        c.transform(deltaY/8000*Math.PI,-deltaX/8000*Math.PI)
        x_=rx
        y_=ry
    
        
    }
}