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