java画球_canvas绘制3d球体

window.οnlοad=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

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

for(var e=0;e

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.οnmοusemοve=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

}

}