HTML5 CSS3 诱人的实例 ：canvas 模拟实现电子彩票刮刮乐

*将文本绘制到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