大转盘抽奖小程序版 转盘抽奖网页版


Posted in Javascript onApril 16, 2020

今天整理了下以前写的小demo,把大转盘抽奖的代码,整合下,列了网页版和小程序两个版本,这个转盘抽奖的核心是H5的canvas和Css3的translate属性,非常简单,写了网页版和小程序版供大家参考,主要核心代码就是利用canvas画图,完整代码见大转盘抽奖,下载可用

希望给大家带来帮助

//转盘内部绘制
lottery.prototype.getCanvasI=function(){
 let itemsArc=360/this.itemsNum //获取大转盘每等分的角度
 this.itemsArc=itemsArc
 let widthI=canvasI.width
 let heightI=canvasI.height
 this.w1=parseInt(widthI/2)
 this.h1=parseInt(heightI/2)
 this.Items(itemsArc)//每一份扇形的内部绘制
 this.mytime=setInterval(this.light.bind(this),1000)
}
//绘制奖品名称
lottery.prototype.Items=function(e){
 let that=this
 let itemsArc=e//每一分扇形的角度
 let Num=that.itemsNum// 等分数量
 let text=that.text// 放文字的数组
 for(let i=0;i<Num;i++){
  ctx.beginPath()
  ctx.moveTo(that.w1,that.h1)
  ctx.arc(that.w1,that.h1,that.w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//绘制扇形,注意下一个扇形比上一个扇形多一个itemsArc的角度
  ctx.closePath()
  if (i % 2 == 0) {//绘制偶数扇形和奇数扇形的颜色不同
   ctx.fillStyle=that.color[0]
  } else {
   ctx.fillStyle=that.color[1]
  }
  ctx.fill()
  ctx.save()
  ctx.beginPath()
  ctx.fontSize=12
  ctx.fillStyle='#000'
  ctx.textAlign='center'
  ctx.textBaseline='middle'
  ctx.translate(that.w1, that.h1);//将原点移至圆形圆心位置
  ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋转文字,从 i+2 开始,因为扇形是从数学意义上的第四象限第一个开始的,文字目前的位置是在圆心正上方,所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
  ctx.fillText(that.text[i], 0, -(that.h1 * 0.8));
  ctx.restore();//保存绘图上下文,使上一个绘制的扇形保存住。
 }
}
 
 
//跑马灯绘制
lottery.prototype.light=function(){
 var that=this
 var itemsNum=that.itemsNum
 that.lamp++
 if(that.lamp>=2){
  that.lamp=0
 }
 ctx2.beginPath()
 ctx2.arc(that.w2,that.h2,that.w2,0,2*Math.PI)//绘制底色为红色的圆形
 ctx2.fillStyle="#FA7471";
 ctx2.fill()
 for(let i=0;i<that.itemsNum*2;i++){//跑马灯小圆圈比大圆盘等分数量多一倍
  ctx2.save()
  ctx2.beginPath()
  ctx2.translate(that.w2,that.h2)
  ctx2.rotate(30*i*Math.PI/180)
  ctx2.arc(0,that.h2-10,5,0,2*Math.PI)//圆形跑马灯小圆圈
  //跑马灯第一次闪烁时与第二次闪烁时绘制相反的颜色,再配上定时器循环闪烁就可以达到跑马灯一闪一闪的效果了
  if(that.lamp==0){//第一次闪烁时偶数奇数的跑马灯各绘制一种颜色
  if(i%2==0){
   ctx2.fillStyle="#FBF1A9";
  } else {
   ctx2.fillStyle="#fbb936";
  }
  }else {//第二次闪烁时偶数奇数的跑马灯颜色对调
   if (i % 2 == 0) {
    ctx2.fillStyle="#fbb936";
   } else {
    ctx2.fillStyle="#FBF1A9";
   }
  }
  ctx2.fill()
  ctx2.restore()//恢复之前保存的上下文,可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖,
 }
 }

小程序的代码示例

//事件处理函数
 onLoad: function (e) {
  let that=this
  let itemsArc=360/that.data.itemsNum //获取大转盘每等分的角度
  that.setData({
   itemsArc
  },function () {
   wx.createSelectorQuery().select('#canvas-one').boundingClientRect(function (rect) {
    w1=parseInt(rect.width/2)
    h1=parseInt(rect.height/2)
    that.Items(itemsArc)//每一份扇形的内部绘制
   }).exec()
   mytime=setInterval(that.light,1000)//启动跑马灯定时器
  })
 },
 onReady:function () {
  var that=this
  wx.createSelectorQuery().select('#canvas-bg').boundingClientRect(function (rect) {//监听canvas的宽高
   w2=parseInt(rect.width/2)
   h2=parseInt(rect.height/2)
   that.light()
  }).exec()
 },
 light(){//跑马灯绘制
  let that=this
  let itemsNum=that.data.itemsNum
  lamp++
  if(lamp>=2){
   lamp=0
  }
  ctx2.beginPath()
  ctx2.arc(w2,h2,w2,0,2*Math.PI)//绘制底色为红色的圆形
  ctx2.setFillStyle("#FA7471")
  ctx2.fill()
  for(let i=0;i<itemsNum*2;i++){//跑马灯小圆圈比大圆盘等分数量多一倍
   ctx2.save()
   ctx2.beginPath()
   ctx2.translate(w2,h2)
   ctx2.rotate(30*i*Math.PI/180)
   ctx2.arc(0,w2-10,5,0,2*Math.PI)//绘制圆形跑马灯小圆圈
   //跑马灯第一次闪烁时与第二次闪烁时绘制相反的颜色,再配上定时器循环闪烁就可以达到跑马灯一闪一闪的效果了
   if(lamp==0){//第一次闪烁时偶数奇数的跑马灯各绘制一种颜色
    if(i%2==0){
     ctx2.setFillStyle("#FBF1A9");
    } else {
     ctx2.setFillStyle("#fbb936");
    }
   }else {//第二次闪烁时偶数奇数的跑马灯颜色对调
    if (i % 2 == 0) {
     ctx2.setFillStyle("#fbb936");
    } else {
     ctx2.setFillStyle("#FBF1A9");
    }
   }
   ctx2.fill()
   ctx2.restore()//恢复之前保存的上下文,可以将循环出来的跑马灯都保存下来。没有这一句那么每循环出一个跑马灯则上一个跑马灯绘图将被覆盖,
  }
  ctx2.draw()
 },
 Items(e){
  let that=this
  let itemsArc=e//每一分扇形的角度
  let Num=that.data.itemsNum// 等分数量
  let text=that.data.text// 放文字的数组
  for(let i=0;i<Num;i++){
   ctx.beginPath()
   ctx.moveTo(w1,h1)
   ctx.arc(w1,h1,w1-5,itemsArc * i * Math.PI / 180, (itemsArc + itemsArc * i) * Math.PI / 180)//绘制扇形,注意下一个扇形比上一个扇形多一个itemsArc的角度
   ctx.closePath()
   if (i % 2 == 0) {//绘制偶数扇形和奇数扇形的颜色不同
    ctx.setFillStyle(that.data.color[0])
   } else {
    ctx.setFillStyle(that.data.color[1])
   }
   ctx.fill()
   ctx.save()
   ctx.beginPath()
   ctx.setFontSize(12)
   ctx.setFillStyle('#000')
   ctx.setTextAlign('center')
   ctx.setTextBaseline('middle')
   ctx.translate(w1, h1);//将原点移至圆形圆心位置
   ctx.rotate((itemsArc * (i + 2)) * Math.PI / 180);//旋转文字,从 i+2 开始,因为扇形是从数学意义上的第四象限第一个开始的,文字目前的位置是在圆心正上方,所以起始位置要将其旋转2个扇形的角度让其与第一个扇形的位置一致。
   ctx.fillText(text[i], 0, -(h1 * 0.8));
   ctx.restore();//保存绘图上下文,使上一个绘制的扇形保存住。
  }
  // that.Images();
  ctx.draw(true);//参数为true的时候,保存当前画布的内容,继续绘制
 },

效果图如下

大转盘抽奖小程序版 转盘抽奖网页版

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
C#中TrimStart,TrimEnd,Trim在javascript上的实现
Jan 17 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JavaScript学习笔记之Function对象
Jan 22 Javascript
常用的Javascript数据验证插件
Aug 04 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
JS继承之借用构造函数继承和组合继承
Sep 07 Javascript
JavaScript实现三级联动菜单实例代码
Jun 26 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
javascript json字符串到json对象转义问题
Jan 22 #Javascript
使用JavaScript保存文本文件到本地的两种方法
Jan 22 #Javascript
微信小程序实现九宫格抽奖
Apr 15 #Javascript
200行HTML+JavaScript实现年会抽奖程序
Jan 22 #Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 #Javascript
微信小程序使用map组件实现解析经纬度功能示例
Jan 22 #Javascript
微信小程序全局变量功能与用法详解
Jan 22 #Javascript
You might like
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
PHP连接MSSQL2008/2005数据库(SQLSRV)配置实例
2014/10/22 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
解析jquery中的ajax缓存问题
2013/12/19 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
2015/11/23 Javascript
javascript截图 jQuery插件imgAreaSelect使用详解
2016/05/04 Javascript
JS平滑无缝滚动效果的实现代码
2016/05/06 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
angularjs 页面自适应高度的方法
2018/01/17 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
node.js中path路径模块的使用方法实例分析
2020/02/13 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
Python下的twisted框架入门指引
2015/04/15 Python
Python模拟简单电梯调度算法示例
2018/08/20 Python
python  创建一个保留重复值的列表的补码
2018/10/15 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
python生成13位或16位时间戳以及反向解析时间戳的实例
2020/03/03 Python
会计实习生工作总结的自我评价
2013/10/07 职场文书
大学军训自我鉴定
2013/12/15 职场文书
商场促销活动总结
2014/07/10 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
2014年党的群众路线学习心得体会
2014/11/05 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
文化大革命观后感
2015/06/17 职场文书
使用PDF.js渲染canvas实现预览pdf的效果示例
2021/04/17 Javascript