手机移动端实现 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 相关文章推荐
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
在JS中如何调用JSP中的变量
Jan 22 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
js友好的时间返回函数
Aug 24 Javascript
JS+html5制作简单音乐播放器
Sep 13 Javascript
JavaScript函数节流的两种写法
Apr 07 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
微信小程序自定义底部弹出框
Nov 16 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
vue watch监控对象的简单方法示例
Jan 07 Vue.js
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
世界收音机发展史
2021/03/01 无线电
10个实用的PHP代码片段
2011/09/02 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
浅析十款PHP开发框架的对比
2013/07/05 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
2012/02/10 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
webpack打包react项目的实现方法
2018/06/21 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
如何使用less实现随机下雪动画详解
2019/01/02 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
微信小程序图表插件wx-charts用法实例详解
2019/05/20 Javascript
JSONP 的原理、理解 与 实例分析
2020/05/16 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
详解node.js创建一个web服务器(Server)的详细步骤
2021/01/15 Javascript
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
python爬取哈尔滨天气信息
2018/07/14 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python图像和办公文档处理总结
2019/05/28 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
python3 循环读取excel文件并写入json操作
2020/07/14 Python
John Varvatos官方网站:设计师男士时装
2017/02/08 全球购物
美国最大的农村生活方式零售店:Tractor Supply Company(TSC)
2017/05/15 全球购物
市政施工员自我鉴定
2014/01/15 职场文书
企业管理标语
2014/06/10 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
Apache压力测试工具的安装使用
2021/03/31 Servers