该模块也很简单，主要包括三个基础图形的绘制：矩形 圆形 文字。我们把一个个图像以构造函数的模式封装，例如当我们需要绘制一个矩形对象，我们首先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开发实录-基本图形模块篇的详细内容，更多请关注php中文网其它相关文章！
声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
