canvas转盘抽奖的实现(二)

　　本篇是《canvas转盘抽奖的实现(一)》的另一种实现方法，主要通过css3的transform以及transition过渡来实现。

　　思路比较简单，事先规定好奖品待旋转的角度，然后通过rotate旋转。首先将奖品分为八组，每组记录待旋转的角度：

   var data = {1:{prizeID:1,rotate:2047.5},2:{prizeID:2,rotate:2002.5},3:{prizeID:3,rotate:1957.5},4:{prizeID:4,rotate:1912.5},5:{prizeID:5,rotate:1867.5},6:{prizeID:6,rotate:1822.5},7:{prizeID:7,rotate:1777.5},8:{prizeID:8,rotate:1732.5}};

点击抽奖按钮后执行旋转：

var r = Math.floor(Math.random() * 8 + 1);
function rotation() {draw();c.style.transition = 'all 3s ease-out';c.style.transform = 'rotate('+ data[r].rotate +'deg)';//监听transitionend，动画结束后触发事件    c.addEventListener('transitionend', stopRotation, false);
}function stopRotation() {result.innerHTML ='<strong style="font-size:30px; color:red">' + r + '等奖</strong>';
}

css3还是很强大的，只需要几行代码就能把复杂的动画完成。但这里的中奖概率与上一篇的概率均等有所不同，加入了权重：

var num = {1:[1,2,3],2:[4,5,6,7,8],3:[9,10,11,12,13,14,15],4:[16,17,18,19,20,21,22,23,24,25],5:[26,27,28,29,30,31,32,33,34,35,36,37],6:[38,39,40,41,42,43,44,45,46,47,48,49,50,51],7:[52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67],8:[68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100]};

选取100以内的随机数，观察它落在哪个区间，上述代码表示一等奖的概率只有3%，二等奖概率有5%。

r = (Math.random() * 100 + 1) >> 0;for (var key in num) {if (in_array(r, num[key])) {r = key;break;}
}

转载于:https://www.cnblogs.com/undefined000/p/canvas-turntable-2.html

canvas转盘抽奖的实现(二)相关推荐

Canvas实现微信大转盘抽奖代码
Canvas实现微信大转盘抽奖代码,canvas结合jquery实现的一款大转盘抽奖代码,奖品图片均由canvas绘制,可自定义奖项. jquery抽奖微信大转盘jquery抽奖转盘微信抽奖源代码微信 ...
html 5抽奖特效,利用HTML5实现Canvas大转盘抽奖特效
特效描述:利用HTML5实现 Canvas 大转盘抽奖特效.利用HTML5实现Canvas大转盘抽奖特效代码结构 1. 引入JS 2. HTML代码当前浏览器版本过低,请使用其他浏览器尝试 va ...
html转盘游戏代码,html5 canvas大转盘抽奖提示代码
特效描述:html5 canvas 大转盘抽奖提示.只用canvas做出的转盘及指针,各奖项和分区颜色可随意设置. 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码抱歉!浏览器不支持. ...
图解转盘抽奖布局样式，以小程序为例
目前抽奖最常见的两种:九宫格抽奖和转盘抽奖,但转盘抽奖的大多是采用的是将做好的图放在页面上,如果需要变动奖池里面的奖品或数量,就会让设计师重新出一张图片. 分享我自己在自定义转盘抽奖的样式布局思路 ...
Fastadmin 大转盘抽奖+后台管理员扫码核销+公众号发送1块红包
最近公司有需求搞个抽奖活动,看了好多文档,都是到差不差的,记录一下,将就看,肯定还有改进的地方首先还是公众号授权信息,获得授权信息后,拿到openid,传给easywechat的获取单个用户信息方法 ...
Android之九宫格抽奖及大转盘抽奖
一:先来张效果图二:实现步骤: -------.九宫格抽奖是从后台服务器获取的数据,图片文字以及抽奖选中位置都是后台控制一:九宫格抽奖 1九宫格抽奖工具类(里面包含网络请求,不需要的可去掉) pa ...
Android撸一个转盘抽奖
Android撸一个转盘抽奖前言最近在学习的时候想做个积分转盘抽奖的功能,以前项目中使用过,但是是用的H5写的,但是我现在还不是太会写网页,就想算了,用Android写个吧!因为我这边的业务逻辑是 ...
html canvas抽奖,HTML5 Canvas圆盘抽奖应用（适用于Vue项目）
HTML5 Canvas圆盘抽奖应用DEMO演示 }.xttblog_box{width:300px;height:300px;margin:100px auto;position:relative; ...
转盘在转动的同时ajax异步加载,用jQuery旋转插件jqueryrotate制作转盘抽奖.pdf
用用jQuery旋旋转转插插件件jqueryrotate制制作作转转盘盘抽抽奖奖本文实例为大家分享了j Query旋转插件j queryrotate制作转盘抽奖的具体代码,供大家参考,具体内容下 ...

canvas转盘抽奖的实现(二)

canvas转盘抽奖的实现(二)相关推荐

最新文章

热门文章