html5 教程_html5 canvas 圆形抽奖的实例

【www.bbyears.com--php函数】

年底没啥，抽空学习了canvas，写了个html5抽奖的代码，造了个轮子，有用的童鞋可以拿走。

其中，canvas.onclick触发抽奖行为，概率可以在core.lottery()函数上添加，美化也可以替换上图，嘿嘿，给大家做个事例，如有bug，请以评论的形式提出。

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

本文来源：http://www.bbyears.com/jiaocheng/49475.html