canvas转盘抽奖的实现(二)

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

 

 

// ' + r + '等奖';
}
draw();

var run = document.getElementById('run'),
result = document.getElementById('result'),
r,
flag = false;

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]
};
document.onselectstart = function() {
return false;
};
run.onclick = function() {
if(flag) return false;
flag = true;
r = (Math.random() * 100 + 1) >> 0;

for(var key in num) {
if(in_array(r,num[key])) {
r = key;
break;
}
}

c.style.transition = 'none';
c.style.transform = 'rotate(0)';
rotation();
};

function in_array(stringToSearch, arrayToSearch) {
for (s = 0; s

　　思路比较简单，事先规定好奖品待旋转的角度，然后通过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;
    }
}