html5 canvas 圆形抽奖

作者:沙师弟时间:2014-01-28
年底没啥,抽空学习了canvas,写了个html5抽奖的代码,造了个轮子,有用的童鞋可以拿走。 其中,canvas.onclick触发抽奖行为,概率可以在core.lottery()函数上添加,美化也可以替换上图,嘿嘿,给大家做个事例,如有bug,请以评论的形式提出。
<!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();
		},

		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>