您的位置：首页 > Web前端 > HTML5

html5 canvas 圆形抽奖的实例

2014-02-22 09:10 543 查看

年底没啥，抽空学习了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();
},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>

你可能感兴趣的文章

一个简单的html5 canvas时钟例子

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航