手机移动端实现 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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JavaScript window.document的属性、方法和事件小结
Oct 24 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
jQuery is not defined 错误原因与解决方法小结
Mar 19 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 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 + nginx项目中的权限详解
2017/05/23 PHP
理解JavaScript中的事件
2006/09/23 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
js querySelector和getElementById通过id获取元素的区别
2012/04/20 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
layui文件上传实现代码
2017/05/20 Javascript
jQuery 表单序列化实例代码
2017/06/11 jQuery
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
微信小程序的mpvue框架快速上手指南
2019/05/15 Javascript
使用js在layui中实现上传图片压缩
2019/06/18 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
js实现表格数据搜索
2020/08/09 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
[04:28]2014DOTA2国际邀请赛 采访小兔子LGD挺进钥匙体育馆
2014/07/14 DOTA
[55:26]DOTA2-DPC中国联赛 正赛 Aster vs LBZS BO3 第一场 2月23日
2021/03/11 DOTA
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
python内打印变量之%和f的实例
2020/02/19 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
python wsgiref源码解析
2021/02/06 Python
护理专科毕业推荐信
2013/11/10 职场文书
初一英语教学反思
2014/01/11 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
小学大队干部竞选稿
2015/11/20 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
企业管理制度设计时要注意的几种“常见病”!
2019/04/19 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python
CI Games宣布《堕落之王2》使用虚幻引擎5制作 预计将于2023年正式发售
2022/04/11 其他游戏