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


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 相关文章推荐
javascript add event remove event
Apr 07 Javascript
JavaScript SetInterval与setTimeout使用方法详解
Nov 15 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
JavaScript门面模式详解
Oct 19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
React路由管理之React Router总结
May 10 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
Aug 24 Javascript
从vue源码看props的用法
Jan 09 Javascript
vue实现购物车功能(商品分类)
Apr 20 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
Oct 28 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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
php mssql 数据库分页SQL语句
2008/12/16 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
srcElement表格样式
2006/09/03 Javascript
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
Web开发之JavaScript
2012/03/29 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
js获取url中&quot;?&quot;后面的字串方法
2014/05/15 Javascript
JavaScript判断是否为数组的3种方法及效率比较
2015/04/01 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
2015/11/07 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
2015/11/24 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JS实现的简单四则运算计算器功能示例
2017/09/27 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
python黑魔法之参数传递
2016/02/12 Python
Python使用urllib2模块抓取HTML页面资源的实例分享
2016/05/03 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
python 实现数字字符串左侧补零的方法
2018/12/04 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
Python中print函数简单使用总结
2019/08/05 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的?
2013/02/17 面试题
应届生自荐书
2014/06/23 职场文书