手机实现jquery和HTML5 Canvas幸运大奖特效

HTML5画布的幸运大奖特效

现在好的微信微信业务或者微信微信官方账号都有这么大的转盘项目，我们可以在这里整理一个供参考。

这是一个基于jquery和HTML5 Canvas的幸运大奖特效。幸运大奖特效支持移动终端，通过动态构建Canvas元素生成大奖盘，通过jquery代码随机获取奖品。

施用方式

HTML结构

彩票的大转盘是由图片组成的，图片隐藏在开头。整个抽奖托盘放置在一个容器中，通过控制容器的大小可以控制托盘的大小。

XML/HTML代码div class=' container ' img src=' http : images/1 . png ' id=' shan-img ' style=' display : none；'/img src=' http : images/2 . png ' id='对不起-img ' style=' display : none；'/div class='banner' div class='收费板' style=' background-image : URL(images/收费板-BG . png)；背景-大小：100% 100%；”canvas class=' item ' id=' wheel canvas ' width=' 422 px ' height=' 422 px '/canvas img class=' pointer ' src=' http : images/转盘-pointer . png '/div/div CSS style

将以下CSS样式添加到大奖托盘中：

CSS代码。横幅{ display:block宽度：95%；左边距left:auto右边距： auto；边距-bottom : 20px；} .班纳。转盘{ display:block宽度：100%；位置：相对；} .班纳。转盘帆布. item { width :100%；} .班纳。转盘img . pointer { position : absolute；宽度：31.5%；高：42.5%；左：34.6%；top:23} JavaScript

整个大奖盘的jquery实现代码如下：

JavaScript代码

定义变量转盘={餐厅3360[]，//大转盘奖品名称colors:[]，//大转盘奖品区块对应背景颜色外侧：192,//大转盘外圆的半径textRadius:155，//大转盘奖品位置距离圆心的距离insideRadius:68，//大转盘内圆的半径起始角度：0,//开始角度bRotate:false //false:停止；图：旋转};$(文档)。就绪（函数(){ //动态添加大转盘的奖品与奖品区域背景颜色收费公路。餐馆=['50M免费流量包', '10金币', '谢谢参与', '5金币，' 10M免费流量包，' 20M免费流量包', '20金币，' 30M免费流量包，' 100米免费流量包', '2金币'];转盘。colors=['#FFF4D6 '，' # ffffffff '，' #FFF4D6 '，' #FFFFFF '，' #FFF4D6 '，' # ffffffff '，' #FFF4D6 '，' # ffffffff '，' #FFF4D6 '，' #FFF4D6 '，' #FFF4D6 '，' # ffffffffffff ']；var rotateimeout=function(){ $(' # wheel canvas ').旋转({ angle:0，animateTo:2160，duration:8000，callback:function (){ alert('网络超时，请检查您的网络设置!');} });};//旋转转盘项目：奖品位置；txt:提示语；var rotateFn=function (item，txt){ var angles=item * (360 /转盘。餐馆。长度)-(360/(转盘。餐馆。长度* 2))；if(角度270){ angles=270-angles；} else { angles=360-angles 270；} $('#wheelcanvas ').停止旋转()；$('#wheelcanvas ').旋转({ angle:0，animateTo:angles 1800，duration:8000，callback : function(){ alert(txt)；收费公路兄弟=！转盘。} });};$('.指针')。单击(函数(){ if(转盘。兄弟)返回；收费公路兄弟=！转盘。//获取随机数（奖品个数范围内)var item=rnd(1，转盘。餐馆。长度)；//奖品数量等于10,指针落在对应奖品区域的中心角度[252，216，180，144，108，72，36，360，324，288] rotateFn(项目，转盘。餐馆[项目-1]);});});函数rnd(n，m){ var random=math。地板(数学。random()*(m-n ^ 1)n)；随机返回；} //页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染窗户。onload=function(){ drawRouletteWheel()；};函数drawinrouleteewheel(){ var canvas=document。getelementbyid('车轮画布')；if (canvas.getContext) { //根据奖品个数计算圆周角度var弧=数学PI /(转盘。餐馆。长度/2)；var CTX=画布。get context(' 2d ')；//在给定矩形内清空一个矩形ctx.clearRect(0，0，422，422)；//strokeStyle属性设置或返回用于笔触的颜色、渐变或模式ctx.strokeStyle=' # FFBE04//字体属性设置或返回画布上文本内容的当前字体属性ctx.font='16px微软雅黑；for(var I=0；我收费。餐馆。长度；i ) {可变角度=转盘。起始角度I *圆弧；ctx.fillStyle=转盘。颜色[I]；CTX。begin path()；//arc(x，y，r，起始角，结束角，绘制方向)方法创建弧/曲线（用于创建圆或部分圆)ctx.arc(211，211，转盘。外圆、角、角弧、假)；ctx.arc(211，211，转盘。insideRadius，角度弧，角度，真);CTX。笔画()；CTX。fill()；//锁画布（为了保存之前的画布状态)CTX。save()；//- 绘制奖品开始CTX。FillStyle=' # e 5302 fvar文本=转盘。餐馆[我]；var line _ height=17//翻译方法重新映射画布上的(0,0) 位置ctx.translate(211 Math.cos(角弧/2) *转盘。textRadius，211 Math.sin(角弧/2) *转盘。文本半径)；//旋转方法旋转当前的绘图ctx.rotate(角度弧/2数学.PI/2)；/** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。

（具体根据实际情况改变)**/if(text.indexOf('M')0){//流量包var文本=文本。拆分(' M ')；for(var j=0；jtexts.lengthj ){ ctx.font=j==0？粗体20px微软雅黑：'16px微软雅黑；if(j==0){ CTX。filltext(texts[j]' M '，-ctx.measureText(texts[j] 'M ').宽度/2，j * line _ height)；}else{ ctx.fillText(texts[j])，-ctx.measureText(texts[j]).宽度/2，j * line _ height)；} } } else if(text。的索引(' M ')===-1文本。长度6){//奖品名称长度超过一定范围text=text.substring(0，6)' | | ' text。子串(6)；var文本=文本。拆分(' | | ')；for(var j=0；jtexts . length j){ CTX . FillText(texts[j])，-ctx.measureText(texts[j]).宽度/2，j * line _ height)；} }else{ //在画布上绘制填色的文本。文本的默认颜色是黑色//measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度ctx.fillText(文本)，-ctx.measureText(文本)。宽度/2,0);} //添加对应图标if(text.indexOf('金币)0){ var img=document。getelementbyid(' shan-img ')；img。onload=function(){ CTX。绘制图像(img，-15，10)；};ctx.drawImage(img，-15，10)；}else if(text.indexOf('谢谢参与)=0){ var img=document。getelementbyid('对不起-img ')；img。onload=function(){ CTX。绘制图像(img，-15，10)；};ctx.drawImage(img，-15，10)；} //把当前画布返回（调整)到上一个保存()状态之前CTX。restore()；//- 绘制奖品结束- } } } 实现效果图：

感谢您的阅读，希望对大家有所帮助，感谢您对本网站的支持！