jQuery和HTML5画布在移动终端上的幸运大奖效应
HTML5帆布大奖赛特殊效果现在好微信微商或微信公众数都有这个大转盘的项目，来梳理，可以称。
这是一个基于jQuery和HTML5画布的幸运大奖赛特效。幸运奖特效支持移动终端，它通过动态构建画布元素并通过jQuery代码随机获得奖品，从而产生大奖赛。
使用方法
HTML结构
彩票的大转盘是用图片制作的，一开始是隐藏的，整个彩票板放在一个容器里，容器的大小可以通过容器的大小来控制。
xml代码
CSS样式
为大奖赛添加以下CSS样式：
CSS代码
。横幅{显示：块；宽度：95%；margin-left: auto；右边距：汽车；margin-bottom: 20px；}
。旗帜。转盘{显示：块；宽度：100%；位置：相对；}
。banner.turnplate帆布。项目{宽度：100%；}
。banner.turnplate img {位置指针：绝对；宽度：31.5%；高度：42.5%；左：34.6%；最高：23%；}
Javaｓｃｒｉｐｔ
整个大奖赛的jQuery实现代码如下所示：
Javaｓｃｒｉｐｔ代码
VaR转盘= {
餐馆：{} /大轮奖项名称
颜色：与奖品的背景色相对应的大磁盘块
半径：192 /大转盘半径
textradius：155 /大轮的位置从奖的中心距
InsideRadius：68、对内圆/大轮的半径
StartAngle：0 /起点
brotate： / /假假：停止；真：旋转
}；
$（文档）Ready（函数（）{）
奖品和奖品/区域背景颜色添加动态磁盘。
turnplate.restaraunts = { { 50m自由流包}，10金币
turnplate.colors = {# fff4d6
无功rotatetimeout =函数（）{（）
$（# wheelcanvas的旋转（{）。
角度：0，
AnimateTo：2160，
持续时间：8000，
回调函数（）{
警报（网络超时，请检查您的网络设置！）；
}
}）；
}；
旋转转盘项目：奖品位置；txt：提示；
无功rotatefn =功能（项目，TXT）{
功角=项目*（360 /转盘。餐馆。长度）-（360 /（（转盘。餐馆。长度×2））；
如果（角＜270）{
角度= 270个角度；
其他{ }
角度= 360 -角+ 270；
}
$（# wheelcanvas）。StopRotate（）；
$（# wheelcanvas的旋转（{）。
角度：0，
AnimateTo：角度+ 1800，
持续时间：8000，
回调函数（）{
警报（TXT）；
turnplate.brotate =！turnplate.brotate；
}
}）；
}；
$（指针）。Click（函数（）{）
如果（转盘。brotate）返回；
turnplate.brotate =！turnplate.brotate；
获取一个随机数（中奖号码范围）
var项目＝RND（1，转盘。餐馆。长度）；
奖品数等于10，{ 252个指针落在中心，对应区域的216个奖项，180, 144, 108，72, 36, 360，324, 288 }。
RotateFn（项目，转盘，item-1餐馆{ }）；
}）；
}）；
函数RND（n，m）{
无功随机= math.floor（Math.random（）*（M + 1）+ N）；
返回随机；
}
/ /网页的所有元素加载drawroulettewheel实施后（）方法被用来使转盘
窗口。指针函数（）{
DrawRouletteWheel（）；
}；
功能drawroulettewheel（）{
VaR的画布document.getelementbyid（wheelcanvas ）；
如果（帆布。getContext）{
根据圆周角/奖品数计算
VaR弧= math.pi /（转盘。餐馆。长度/ 2）；
VaR CTX = canvas.getcontext（2D）；
在给定矩形上清空一个矩形。
（00422422）ctx.clearrect；
/ / strokeStyle属性设置或返回的颜色，渐变，图案用于中风
Ctx.strokeStyle = #FFBE04;
设置或返回画布上文本内容的当前字体属性。
ctx.font = '16px微软雅黑'；
对于（var i = 0；i < turnplate.restaraunts.length；i++）{
功角= turnplate.startangle +我弧；
ctx.fillstyle =转盘的颜色{我}；
Ctx.beginPath（）；
圆弧（x，y，r，起始角，结束角，方向图）方法创建弧曲线（用于创建圆或圆）
ctx.arc（211, 211，turnplate.outsideradius，角，角+弧，假）；
ctx.arc（211, 211，turnplate.insideradius，角+弧角，真的）；
Ctx.stroke（）；
Ctx.fill（）；
锁定画布（画布之前为了保存状态）
Ctx.save（）；
抽奖——开始
ctx.fillstyle =# e5302f ；
var text =转盘。餐馆{我}；
无功line_height = 17；
/ /翻译方法重新映射（0,0）在画布上的位置
ctx.translate（211 + math.cos（角+弧 / 2）* 211 + turnplate.textradius，math.sin（角+弧 / 2）*转盘。textradius）；
旋转方法旋转当前的绘图。
ctx.rotate（角+弧 / 2 + math.pi / 2）；
下面的代码类型，根据获奖奖品名称长度渲染效果，如字体、颜色、图片效果。
如果（text.indexof（M）> 0）{ / /包流量
var文本= text.split（我）；
对于（var j = 0；J < texts.length；j++）{
ctx.font = = = 0'bold 20px微软雅黑：'16px微软雅黑'；
如果（j＝0）{
Ctx.fillText（文本{ } +M J
其他{ }
Ctx.fillText（文本（文本-ctx.measuretext { J }，{，}）。宽度 / 2，J * line_height）；
}
}
} else if（text.indexof（我）= = - 1文字。长> 6）{ / /奖项名称长度超过一定的范围
文本= text.substring（0,6）+| | + text.substring（6）；
var文本= text.split（| | ）；
对于（var j = 0；J < texts.length；j++）{
Ctx.fillText（文本（文本-ctx.measuretext { J }，{，}）。宽度 / 2，J * line_height）；
}
其他{ }
在画布着色中绘制文本。文本的默认颜色是黑色。
/ / measuretext（）方法返回一个对象包含的像素表指定的字体宽度
Ctx.fillText（文本，-ctx.measuretext（文本）。宽度 / 2, 0）；
}
添加相应的图标
如果（text.indexof（金币）> 0）{
VaR img = document.getelementbyid（山下）；
IMG。指针函数（）{
Ctx.drawImage（IMG，- 15,10）；
}；
Ctx.drawImage（IMG，- 15,10）；
} else if（text.indexof（谢谢参与）> = 0）{
VaR img = document.getelementbyid（对不起IMG ）；
IMG。指针函数（）{
Ctx.drawImage（IMG，- 15,10）；
}；
Ctx.drawImage（IMG，- 15,10）；
}
画布（/调整）返回一个保存（以前）
Ctx.restore（）；
·汲取奖品——结束
}
}
}
实现效果图：
谢谢你的阅读。我希望你能帮助你，谢谢你对这个站的支持。