手机移动端实现 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 浏览器验证代码(来自discuz)
Jul 17 Javascript
jquery二级导航内容均分的原理及实现
Aug 13 Javascript
EditPlus中的正则表达式 实战(4)
Dec 15 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
redux-saga 初识和使用
Mar 10 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
Oct 24 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
javscript 数组扁平化的实现
Feb 03 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和ACCESS写聊天室(十)
2006/10/09 PHP
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
Javascript读取cookie函数代码
2010/10/16 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
jquery 鼠标滑动显示详情应用示例
2014/01/24 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
javascript实现PC网页里的拖拽效果
2016/03/14 Javascript
jQuery插件扩展测试实例
2016/06/21 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
2017/04/23 jQuery
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
产制造追溯系统之通过微信小程序实现移动端报表平台
2019/06/03 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
[02:18]DOTA2英雄基础教程 育母蜘蛛
2014/01/20 DOTA
Python中的闭包详细介绍和实例
2014/11/21 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python基于json文件实现的gearman任务自动重启代码实例
2019/08/13 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
Python reversed反转序列并生成可迭代对象
2020/10/22 Python
HTML5边玩边学(3)像素和颜色
2010/09/21 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
意大利网上药房:Farmacia 33
2020/01/27 全球购物
2014年消防工作实施方案
2014/02/20 职场文书
会计自荐信范文
2014/03/09 职场文书
五一劳动节活动记录
2014/03/23 职场文书
走群众路线剖析材料
2014/10/09 职场文书
小学毕业教师寄语
2019/06/21 职场文书