• html5 canvas 圆形抽奖的实例


    年底没啥,抽空学习了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>

     
    你可能感兴趣的文章
  • 相关阅读:
    Unity3d获取APK签名及公钥的方法
    NGUI屏幕自适应
    转:Firefox中firebug和xpath checker工具的使用
    判断输入的手机号和价格是否合法
    IOS 四种保存数据的方式
    IOS开发控制器之间传值的几种小方法
    AlertView的三种弹窗模式
    多线程之NSThread、NSOperation及GCD
    IOS Key-Value Observing (KVO)
    UILabel的相关属性设置
  • 原文地址:https://www.cnblogs.com/alibai/p/3560400.html
Copyright © 2020-2023  润新知