|
<!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>
|