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