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

}
}