最新资讯当前位置:菲娱2 > 最新资讯 > >

恒行平台官网:javascript+HTML5 Canvas绘制转盘抽奖

  

[javascript,HTML5,Canvas转盘抽奖]javascript+HTML5 Canvas绘制转盘抽奖

  

之前做过的项目中,有需要抽奖转盘功能的。项目已经完工一段时间了,也没出现什么严重的bug,所以现在拎出来分享给大家。

  

  

功能需求  
  
1、转盘要美观,转动效果流畅。

  
  2、转盘上需要显示奖品图片,并且奖品是后台读取的照片和名字。

  
  3、转动动画完成后要有相应提示。

  
  4、获取的奖品具体算法在数据库里操作,前端只提供最后的效果展示。

  
  

  

知识要点  
  1、引用了一个jq插件:awardRotate,用来实现更智能化的转动(插件下载:)。

  
  2、使用canvas标签和对应的html5 api 进行操作。(canvas中文手册可以查看  
  

  

正文  
  
引用大转盘样式  
  

  
  
  .lunck_draw_wrap{display:block;width:95%;margin-right:auto;}  .lunck_draw_wrap .turnplate{display:block;width:106%; position:relative;}  .lunck_draw_wrap .turnplate canvas.item{left:1px;  position: relative;  top:9px;  width:100%;}  .lunck_draw_wrap .turnplate img.pointer{ height:37.5%;  left:34.6%;  position: absolute;  top:30%;  width:31.5%;}  
  
  

转盘插件所需参数:  
  

  
  
  var turnplate ={  restaraunts:[],//大转盘奖品名称  lucky:[],//奖品内容  colors:[],//大转盘奖品区块对应背景颜色  goodsimgArr:[],//奖品图片页面标签  outsideRadius:175,//大转盘外圆的半径  textRadius:140,//大转盘奖品位置距离圆心的距离  insideRadius:65,//大转盘内圆的半径  startAngle:0,//开始角度  bRotate:false//false:停止;ture:旋转  };  
  
  

由参数可知,我们需要从服务端获取相应的奖品名称,奖品内容,奖品图片页面标签等信息,再对大转盘进行渲染。

  
  所以我们的第一步操作就是向服务端发送请求获取对应的奖品信息,并且遍历到生成大转盘所需的数组参数里:  
  

  
  
  $.each(data.list,function(key, value){  turnplate.restaraunts.push(value.data0);  turnplate.lucky.push(value.data1);  turnplate.goodsimgArr.push(getLuckyImg + value.data4);  if(key %2==0)  turnplate.colors.push("#fff");  else  turnplate.colors.push("#5fcbd4");  })  
  
  

data.list是我获取来的奖品json数据:  
  

  
  
  [  {  "data0":"一等奖",  "data1":"iphone6s",  "data2":"0",  "data3":"0",  "data4":"201510161406303384.png",  "data5":"XXXX网络科技",  "data6":"浙江省衢州市柯城区XXXXX",  "data7":"0570-XXXXXX"  },......

(责任编辑:admin)

上一篇:jQuery源码解读之hasClass()方法分析

下一篇:jQuery Html控件基本操作(日常收集整理)

推荐内容

客户服务热线

010-400-12345

在线客服