1.功能
该模块也很简单，主要包括三个基础图形的绘制：矩形 圆形 文字。我们把一个个图像以构造函数的模式封装，例如当我们需要绘制一个矩形对象，我们首先new出一个矩形对象，再调用对象的draw方法进行绘制。例如：
var rect=new cngame.shape.rect();
rect.draw();
2.实现
该模块包括三个图形对象，因此我们建立三个构造函数，它们分别有自己的各种方法，包括绘制，移动，旋转，尺寸调整等等，由于三个对象的方法有较多相似，我们以矩形对象为例进行解释，首先看构造函数：
/**
*矩形对象
**/
var rect=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}
需要注意的是，该函数如果不是以构造函数方式调用，则会return new 构造函数，使函数始终以构造函数方式调用，返回生成的矩形对象。之后调用init进行初始化。
另外虽然每个对象有不同的属性，但是我们也应该为对象设定默认对象。这里就需要使用到之前在core模块extend函数，使用户设定的参数和默认对象的参数融合：
/**
*默认值对象
**/
var defaultobj={
x:0,
y:0,
width:100,
height:100
};
options=options||{};
options=cg.core.extend(defaultobj,options);
对于矩形，有一个特别之处是它有四个顶点，因此我们可以在保存x，y坐标之余，保存right顶点，和bottom顶点，方便以后矩形碰撞的检测，该函数也很简单，就是根据宽高和xy计算right和bottom：
/**
*更新right和bottom
**/
var resetrightbottom=function(elem){
elem.right=elem.x+elem.width;
elem.bottom=elem.y+elem.height;
}
当矩形都有了它的位置和尺寸参数后，我们就可以 根据之前的参数把它绘制出来（分别有填充和描边两种模式）：
/**
*绘制矩形
**/
draw:function(style,isfill){
var context=cg.context;
(cg.core.isundefined(isfill))&&(isfill=true);
if(isfill){
context.fillstyle = style;
context.fillrect(this.x, this.y, this.width, this.height);
}
else{
context.strokestyle = style;
context.strokerect(this.x, this.y, this.width, this.height);
}
return this;
}
另外，为了方便开发或测试，对象也提供其他各种改变自己参数的方法：
1.move：使矩形移动一定距离
2.moveto:使矩形移动到特定距离
3.resize：改变矩形一定尺寸
4.resizeto：把矩形改变到特定尺寸
这些方法最后都return this;使方法都支持链式调用。
该模块也比较简单，就不再详述。最后给出该模块所有的源码：
/**
*
*canvas基本形状对象
*
**/
cngame.register("cngame.shape",function(cg){
/**
*更新right和bottom
**/
var resetrightbottom=function(elem){
elem.right=elem.x+elem.width;
elem.bottom=elem.y+elem.height;
}
/**
*矩形对象
**/
var rect=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}
rect.prototype={
/**
*初始化
**/
init:function(options){
/**
*默认值对象
**/
var defaultobj={
x:0,
y:0,
width:100,
height:100,
style:"red",
isfill:true
};
options=options||{};
options=cg.core.extend(defaultobj,options);
this.setoptions(options);
resetrightbottom(this);
},
/**
*绘制矩形
**/
setoptions:function(options){
this.x=options.x;
this.y=options.y;
this.width=options.width;
this.height=options.height;
this.style=options.style;
this.isfill=this.isfill;
},
/**
*绘制矩形
**/
draw:function(){
var context=cg.context;
if(this.isfill){
context.fillstyle = this.style;
context.fillrect(this.x, this.y, this.width, this.height);
}
else{
context.strokestyle = this.style;
context.strokerect(this.x, this.y, this.width, this.height);
}
return this;
},
/**
*将矩形移动一定距离
**/
move:function(dx,dy){
dx=dx||0;
dy=dy||0;
this.x+=dx;
this.y+=dy;
resetrightbottom(this);
return this;
},
/**
*将矩形移动到特定位置
**/
moveto:function(x,y){
x=x||this.x;
y=y||this.y;
this.x=x;
this.y=y;
resetrightbottom(this);
return this;
},
/**
*将矩形改变一定大小
**/
resize:function(dwidth,dheight){
dwidth=dwidth||0;
dheight=dheight||0;
this.width+=dwidth;
this.height+=dheight;
resetrightbottom(this);
return this;
},
/**
*将矩形改变到特定大小
**/
resizeto:function(width,height){
width=width||this.width;
height=height||this.height;
this.width=width;
this.height=height;
resetrightbottom(this);
return this;
}
}
/**
*圆形对象
**/
var circle=function(options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(options);
}
this.init(options);
}
circle.prototype={
/**
*初始化
**/
init:function(options){
/**
*默认值对象
**/
var defaultobj={
x:100,
y:100,
r:100,
startangle:0,
endangle:math.pi*2,
anticlock:false,
style:"red",
isfill:true
};
options=options||{};
options=cg.core.extend(defaultobj,options);
this.setoptions(options);
},
/**
*设置参数
**/
setoptions=function(options){
this.x=options.x;
this.y=options.y;
this.r=options.r;
this.startangle=options.startangle;
this.endangle=options.endangle;
this.anticlock=options.anticlock;
this.isfill=options.isfill;
this.style=options.style;
},
/**
*绘制圆形
**/
draw:function(){
var context=cg.context;
context.beginpath();
context.arc(this.x,this.y,this.r,this.startangle,this.endangle,this.anticlock);
context.closepath();
if(this.isfill){
context.fillstyle=this.style;
context.fill();
}
else{
context.strokestyle=this.style;
context.stroke();
}
},
/**
*将圆形移动一定距离
**/
move:function(dx,dy){
dx=dx||0;
dy=dy||0;
this.x+=dx;
this.y+=dy;
return this;
},
/**
*将圆形移动到特定位置
**/
moveto:function(x,y){
x=x||this.x;
y=y||this.y;
this.x=x;
this.y=y;
return this;
},
/**
*将圆形改变一定大小
**/
resize:function(dr){
dr=dr||0;
this.r+=dr;
return this;
},
/**
*将圆形改变到特定大小
**/
resizeto:function(r){
r=r||this.r;
this.r=r;
return this;
}
}
/**
*将圆形改变到特定大小
**/
var text=function(text,options){
if(!(this instanceof arguments.callee)){
return new arguments.callee(text,options);
}
this.init(text,options);
}
text.prototype={
/**
*初始化
**/
init:function(text,options){
/**
*默认值对象
**/
var defaultobj={
x:100,
y:100,
style:"red",
isfill:true
};
options=options||{};
options=cg.core.extend(defaultobj,options);
this.setoptions(options);
this.text=text;
},
/**
*绘制
**/
draw:function(){
var context=cg.context;
(!cg.core.isundefined(this.font))&&(context.font=this.font);
(!cg.core.isundefined(this.textbaseline))&&(context.textbaseline=this.textbaseline);
(!cg.core.isundefined(this.textalign))&&(context.textalign=this.textalign);
(!cg.core.isundefined(this.maxwidth))&&(context.maxwidth=this.maxwidth);
if(this.isfill){
context.fillstyle=this.style;
this.maxwidth?context.filltext(this.text,this.x,this.y,this.maxwidth):context.filltext(this.text,this.x,this.y);
}
else{
context.strokestyle=this.style;
this.maxwidth?context.stroketext(this.text,this.x,this.y,this.maxwidth):context.stroketext(this.text,this.x,this.y);
}
},
/**
*设置参数
**/
setoptions:function(options){
this.x=options.x||this.x;
this.y=options.y||this.y;
this.maxwidth=options.maxwidth||this.maxwidth;
this.font=options.font||this.font;
this.textbaseline=options.textbaseline||this.textbaseline;
this.textalign=options.textalign||this.textalign;
this.isfill=options.isfill||this.isfill;
this.style=options.style||this.style;
}
}
this.text=text;
this.rect=rect;
this.circle=circle;
});
以上就是html5游戏框架cngamejs开发实录-基本图形模块篇的详细内容。