|
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5圆形抽奖 - zkeyword.com</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #ddd"></canvas>
</body>
<script>
var lottery = (function(){
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
width = 400,
height = 400,
x = 200,
y = 200,
color = ['#a00','#0a0','#00a','#aa0','#a16','#0aa','#a5a','#f31','#784','#a43','#34a','#786'],
deg = Math.PI / 180,
isClick = true,
startTimer = null,
shopTimer = null,
i = 0,
len = 12
speed = 340;
canvas.width = width;
canvas.height = height;
var core = {
init: function(i){
core.bg();
core.proint(i);
core.btn();
},
bg: function(){
var i = 0;
ctx.save();
for(; i < len; i++){
ctx.beginPath();
ctx.fillStyle = color[i];
ctx.moveTo(x, y);
ctx.arc(x, y, 180, deg * i * 30, deg * (i+1) * 30);
ctx.fill();
ctx.closePath();
}
ctx.restore();
},
proint: function(i){
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#333';
ctx.moveTo(x, y);
ctx.arc(x, y, 180, deg * i * 30, deg * (i+1) * 30);
ctx.fill();
ctx.closePath();
ctx.restore();
},
btn: function(){
ctx.beginPath();
ctx.fillStyle = '#555';
ctx.arc(x, y, 50, 0, Math.PI*2);
ctx.fill();
ctx.closePath();
ctx.restore();
},www.111cn.net
clear: function(){
ctx.clearRect(0, 0, 250, 250);
},
/*开始加速*/
start: function(){
i = (i === 12) ? 0 : i;
speed = (speed !== 100) ? (speed - 20) : 100;
startTimer = setTimeout(function(){
core.start();
}, speed);
core.clear();
core.init(i);
i++;
isClick = false;
},
/*匀速运动，指定指针*/
move: function(h){
var val = 12 - Math.abs(h + 1 - i);
if( startTimer ) clearTimeout(startTimer);
if( val !== 12 ){
i = (i === 12) ? 0 : i;
var timer = setTimeout(function(){
core.move(h);
}, speed);
core.clear();
core.init(i);
i++;
}else{
core.stop();
}
},
/*停止减速*/
stop: function(){
if( speed !== 340 ){
i = (i === 12) ? 0 : i;
speed += 20;
shopTimer = setTimeout(function(){
core.stop();
}, speed);
core.clear();
core.init(i);
i++;
}else{
if( shopTimer ) clearTimeout(shopTimer);
core.callback(i);
i = 0;
isClick = true;
}
},
callback: function(i){
console.log(i,'中奖了')
},
random: function(min, max){
return Math.floor(min + Math.random()*(max-min));
},
/*抽奖，概率算法*/
lottery: function(){
var s = core.random(1, 10),
y = core.random(1, 1000);
if( s === 1 ){
core.move(1);
}else if( y === 1 ){
core.move(1);
}else{
core.move(0);
}
console.log(s, y)
}
};
core.init(0);
canvas.onclick = function(e){
if( isClick ){
core.start();
setTimeout(function(){
core.lottery();
}, 5000);
}
//else if( !isClick && speed === 100 ){
//}
}
})();
</script>
</html>
|