HTML5 Canvas的幸运大奖盘特效 现在好的微信微商或者微信公众号都有这种大转盘的项目，这里就整理一个，可以参考下。
这是一款基于jquery和HTML5 Canvas的幸运大奖盘特效。该幸运大奖品特效支持移动端，它通过动态构造Canvas元素来生成大奖盘，并通过jquery代码来随机获取奖品。
使用方法 HTML结构 抽奖用的大转盘使用图片来制作，开始时它们被隐藏。整个抽奖大奖盘放置在一个容器中，控制容器的大小即可以控制奖盘的大小。
XML/HTML代码<div class="container"><img src="images/1.png" id="shan-img" style="display:none;" /><img src="images/2.png" id="sorry-img" style="display:none;" /><div class="banner"> <div class="turnplate" style="background-image:url（images/turnplate-bg.png）;background-size:100% 100%;"><canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas><img class="pointer" src="images/turnplate-pointer.png"/> </div></div> </div>
CSS样式 为大奖盘添加下面的CSS样式：
CSS代码
.banner{display:block;width:95%;margin-left:auto;margin-right:auto;margin-bottom: 20px;} .banner .turnplate{display:block;width:100%;position:relative;} .banner .turnplate canvas.item{width:100%;} .banner .turnplate img.pointer{position:absolute;width:31.5%;height:42.5%;left:34.6%;top:23%;} JavaScript 整个大奖盘的jquery实现代码如下：
JavaScript代码
var turnplate={ restaraunts:[],//大转盘奖品名称 colors:[], //大转盘奖品区块对应背景颜色 outsideRadius:192, //大转盘外圆的半径 textRadius:155,//大转盘奖品位置距离圆心的距离 insideRadius:68, //大转盘内圆的半径 startAngle:0,//开始角度 bRotate:false//false:停止;ture:旋转 }; $（document）.ready（function（）{//动态添加大转盘的奖品与奖品区域背景颜色turnplate.restaraunts = ["50M免费流量包", "10金币", "谢谢参与", "5金币", "10M免费流量包", "20M免费流量包", "20金币 ", "30M免费流量包", "100M免费流量包", "2金币"];turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF","#FFF4D6", "#FFFFFF"]; var rotateTimeOut = function （）{ $（"#wheelcanvas"）.rotate（{angle:0,animateTo:2160,duration:8000,callback:function （）{ alert（"网络超时，请检查您的网络设置！"）;} }）;};//旋转转盘 item:奖品位置; txt：提示语;var rotateFn = function （item, txt）{ var angles = item * （360 / turnplate.restaraunts.length） - （360 / （turnplate.restaraunts.length*2））; if（angles<270）{angles = 270 - angles;}else{angles = 360 - angles + 270; } $（"#wheelcanvas"）.stopRotate（）; $（"#wheelcanvas"）.rotate（{angle:0,animateTo:angles+1800,duration:8000,callback:function （）{ alert（txt）; turnplate.bRotate = ！turnplate.bRotate;} }）;};$（".pointer"）.click（function （）{ if（turnplate.bRotate）return; turnplate.bRotate = ！turnplate.bRotate; //获取随机数（奖品个数范围内） var item = rnd（1,turnplate.restaraunts.length）; //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288] rotateFn（item, turnplate.restaraunts[item-1]）;}）; }）; function rnd（n, m）{var random = Math.floor（Math.random（）*（m-n+1）+n）;return random;} //页面所有元素加载完毕后执行drawRouletteWheel（）方法对转盘进行渲染 window.onload=function（）{drawRouletteWheel（）; }; function drawRouletteWheel（） {var canvas = document.getElementById（"wheelcanvas"）;if （canvas.getContext） { //根据奖品个数计算圆周角度 var arc = Math.PI / （turnplate.restaraunts.length/2）; var ctx = canvas.getContext（"2d"）; //在给定矩形内清空一个矩形 ctx.clearRect（0,0,422,422）; //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式ctx.strokeStyle = "#FFBE04"; //font 属性设置或返回画布上文本内容的当前字体属性 ctx.font = "16px Microsoft YaHei";for（var i = 0; i < turnplate.restaraunts.length; i++） {var angle = turnplate.startAngle + i * arc;ctx.fillStyle = turnplate.colors[i];ctx.beginPath（）;//arc（x,y,r,起始角,结束角,绘制方向） 方法创建弧/曲线（用于创建圆或部分圆）ctx.arc（211, 211, turnplate.outsideRadius, angle, angle + arc, false）;ctx.arc（211, 211, turnplate.insideRadius, angle + arc, angle, true）;ctx.stroke（）; ctx.fill（）;//锁画布（为了保存之前的画布状态）ctx.save（）; //----绘制奖品开始----ctx.fillStyle = "#E5302F";var text = turnplate.restaraunts[i];var line_height = 17;//translate方法重新映射画布上的 （0,0） 位置ctx.translate（211 + Math.cos（angle + arc / 2） * turnplate.textRadius, 211 + Math.sin（angle + arc / 2） * turnplate.textRadius）; //rotate方法旋转当前的绘图ctx.rotate（angle + arc / 2 + Math.PI / 2）; /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。（具体根据实际情况改变） **/if（text.indexOf（"M"）>0）{//流量包 var texts = text.split（"M"）; for（var j = 0; j<texts.length; j++）{ctx.font = j == 0?"bold 20px Microsoft YaHei":"16px Microsoft YaHei";if（j == 0）{ ctx.fillText（texts[j]+"M", -ctx.measureText（texts[j]+"M"）.width / 2, j * line_height）;}else{ ctx.fillText（texts[j], -ctx.measureText（texts[j]）.width / 2, j * line_height）;} }}else if（text.indexOf（"M"） == -1 && text.length>6）{//奖品名称长度超过一定范围text = text.substring（0,6）+"||"+text.substring（6）; var texts = text.split（"||"）; for（var j = 0; j<texts.length; j++）{ctx.fillText（texts[j], -ctx.measureText（texts[j]）.width / 2, j * line_height）; }}else{ //在画布上绘制填色的文本。文本的默认颜色是黑色 //measureText（）方法返回包含一个对象，该对象包含以像素计的指定字体宽度 ctx.fillText（text, -ctx.measureText（text）.width / 2, 0）;} //添加对应图标if（text.indexOf（"金币"）>0）{ var img= document.getElementById（"shan-img"）; img.onload=function（）{ ctx.drawImage（img,-15,10）;};ctx.drawImage（img,-15,10）; }else if（text.indexOf（"谢谢参与"）>=0）{ var img= document.getElementById（"sorry-img"）; img.onload=function（）{ ctx.drawImage（img,-15,10）;};ctx.drawImage（img,-15,10）; }//把当前画布返回（调整）到上一个save（）状态之前 ctx.restore（）;//----绘制奖品结束---- } }}实现效果图：
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
易网时代-编程资源站