html5 canvas 圆形抽奖的实例
年底没啥，抽空学习了canvas，写了个html5抽奖的代码，造了个轮子，有用的童鞋可以拿走。
其中，canvas.onclick触发抽奖行为，概率可以在core.lottery()函数上添加，美化也可以替换上图，嘿嘿，给大家做个事例，如有bug，请以评论的形式提出。
| 代码如下 | 复制代码 |
<!doctype html> <html > <head> <meta charset="UTF-8"> <title>html5圆形抽奖 - zkeyword.com</title> </head> <body> <canvas ></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> |
你可能感兴趣的文章
