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開發實錄-基本圖形模組篇的詳細內容。更多資訊請關注PHP中文網其他相關文章！
