*将文本绘制到canvas的中间
-
@param text
-
@param fill
*/
this.drawTextInCenter = function (text, fill)
{
var point = this.caculateTextCenterPos(text);
if (fill)
{
context.fillText(text, point.x, point.y);
}
else
{
context.strokeText(text, point.x, point.y);
}
};
/**
-
设置画笔宽度
-
@param newWidth
-
@returns {*}
*/
this.penWidth = function (newWidth)
{
if (arguments.length)
{
context.lineWidth = newWidth;
return this;
}
return context.lineWidth;
};
/**
-
设置画笔颜色
-
@param newColor
-
@returns {*}
*/
this.penColor = function (newColor)
{
if (arguments.length)
{
context.strokeStyle = newColor;
context.fillStyle = newColor;
return this;
}
return context.strokeStyle;
};
/**
-
设置字体大小
-
@param fontSize
-
@returns {*}
*/
this.fontSize = function (fontSize)
{
if (arguments.length)
{
context.font = fontSize “px Verdana, Geneva, sans-serif”;
return this;
}
return context.fontSize;
}
}
这个类也就对Canvas对象进行了简单的封装,设置参数,绘制图形什么的,比较简单,大家可以完善下这个类~
3、GuaGuaLe.js
/**
-
Created with JetBrains WebStorm.
-
User: zhy
-
Date: 14-6-24
-
Time: 上午11:36
-
To change this template use File | Settings | File Templates.
*/
function GuaGuaLe(idFront, idBack)
{
this.$eleBack = $(“#” idBack);
this.$el