用html5制作简单图形,利用HTML5绘制点线面组成的3D图形的示例

var Cube = function(length){               this.length = length;

this.faces = [];               this.vectors = [];

}           Cube.prototype = {

_initVector:function(){                   this.vectors[0] = new Vector(-this.length/2 , -this.length/2 , this.length/2);

this.vectors[1] = new Vector(-this.length/2 , this.length/2 , this.length/2);                    this.vectors[2] = new Vector(this.length/2 , -this.length/2 , this.length/2);

this.vectors[3] = new Vector(this.length/2 , this.length/2 , this.length/2);                    this.vectors[4] = new Vector(this.length/2 , -this.length/2 , -this.length/2);

this.vectors[5] = new Vector(this.length/2 , this.length/2 , -this.length/2);                   this.vectors[6] = new Vector(-this.length/2 , -this.length/2 , -this.length/2);

this.vectors[7] = new Vector(-this.length/2 , this.length/2 , -this.length/2);               },

_draw:function(){                   this.faces[0] = new Face(this.vectors[0] , this.vectors[1] , this.vectors[3] , this.vectors[2] , "#6c6");

this.faces[1] = new Face(this.vectors[2] , this.vectors[3] , this.vectors[5] , this.vectors[4] , "#6cc");                   this.faces[2] = new Face(this.vectors[4] , this.vectors[5] , this.vectors[7] , this.vectors[6] , "#cc6");

this.faces[3] = new Face(this.vectors[6] , this.vectors[7] , this.vectors[1] , this.vectors[0] , "#c6c");                   this.faces[4] = new Face(this.vectors[1] , this.vectors[3] , this.vectors[5] , this.vectors[7] , "#666");

this.faces[5] = new Face(this.vectors[0] , this.vectors[2] , this.vectors[4] , this.vectors[6] , "#ccc");

this.faces.sort(function(a , b){                       return b.zIndex - a.zIndex;

});                   this.faces.foreach(function(){

this.draw();                   })

}           }