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; } }