手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效


Posted in Javascript onDecember 06, 2016

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(); 
   //----绘制奖品结束---- 
  }    
 }  
}

实现效果图:

手机移动端实现 jquery和HTML5 Canvas的幸运大奖盘特效

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
用javascript获得地址栏参数的两种方法
Nov 08 Javascript
jQuery检测滚动条是否到达底部
Dec 15 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
js继承实现方法详解
Dec 16 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
vue配置接口域名方法总结
May 12 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
Vue路由的模块自动化与统一加载实现
Jun 05 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 #Javascript
jQuery EasyUI 获取tabs的实例解析
Dec 06 #Javascript
如何防止INPUT按回车自动提交表单FORM
Dec 06 #Javascript
详解ECharts使用心得总结
Dec 06 #Javascript
jQuery实现删除li节点的方法
Dec 06 #Javascript
详解springmvc 接收json对象的两种方式
Dec 06 #Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
Dec 06 #Javascript
You might like
php 目录遍历、删除 函数的使用介绍
2013/04/28 PHP
mac环境中使用brew安装php5.5.15
2014/08/18 PHP
PHP将HTML转换成文本的实现代码
2015/01/21 PHP
php内存缓存实现方法
2015/01/24 PHP
Mac版PhpStorm之XAMPP整合apache服务器配置的图文教程详解
2016/10/13 PHP
判断JavaScript对象是否可用的最正确方法分析
2008/10/03 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
javascript删除数组元素并且数组长度减小的简单实例
2014/02/14 Javascript
javascript中使用正则计算中文长度的例子
2014/04/29 Javascript
深入理解Javascript中this的作用域
2014/08/12 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
使用jQueryMobile实现滑动翻页效果的方法
2015/02/04 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
小程序实现多列选择器
2019/02/15 Javascript
如何利用nodejs实现命令行游戏
2020/11/24 NodeJs
numpy.random模块用法总结
2019/05/27 Python
pytest中文文档之编写断言
2019/09/12 Python
解决django后台管理界面添加中文内容乱码问题
2019/11/15 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
BONIA官方网站:国际奢侈品牌和皮革专家
2016/11/27 全球购物
Fabletics官网:美国运动服饰品牌,由好莱坞女演员凯特·哈德森创立
2019/10/19 全球购物
大四学年自我鉴定
2013/11/13 职场文书
会计助理岗位职责
2014/02/17 职场文书
个人安全生产责任书
2014/07/28 职场文书
小学国庆节活动总结
2015/03/23 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server