首页 前端知识 HTML5 CSS3 诱人的实例 :canvas 模拟实现电子彩票刮刮乐

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

2024-04-29 12:04:17 前端知识 前端哥 934 51 我要收藏

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6421.html
标签
评论
发布的文章

Markdown基础与进阶语法

2024-06-30 22:06:12

零基础 HTML 入门(详细)

2024-06-30 22:06:09

CSS3基本语法

2024-06-30 22:06:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!