【html5 教程】HTML5 Canvas圆盘抽奖应用DEMO演示

更新时间:2020-03-30    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

记得之前我们分享过一款基于jQuery的圆盘抽奖插件,可以在自己的网站中利用这个插件来给用户提供一些抽奖活动。今天要分享的也是一款圆盘抽奖应用,不过它是基于HTML5 Canvas的,运行原理也类似,都是利用随机数原理来实现开奖结果。

html代码

 代码如下






HTML5 Canvas圆盘抽奖应用DEMO演示


<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/main.js">
</script>



 抱歉!浏览器不支持。
 抱歉!浏览器不支持。
 抱歉!浏览器不支持。
 抱歉!浏览器不支持。
 


<script type="text/javascript">
window.alert = function(str)
{
 var shield = document.createElement("DIV");
 shield.id = "shield";
 shield.style.position = "absolute";
 shield.style.left = "50%";
 shield.style.top = "50%";
 shield.style.width = "280px";
 shield.style.height = "150px";
 shield.style.marginLeft = "-140px";
 shield.style.marginTop = "-110px";
 shield.style.zIndex = "25";
 var alertFram = document.createElement("DIV");
 alertFram.id="alertFram";
 alertFram.style.position = "absolute";
 alertFram.style.width = "280px";
 alertFram.style.height = "150px";
 alertFram.style.left = "50%";
 alertFram.style.top = "50%";
 alertFram.style.marginLeft = "-140px";
 alertFram.style.marginTop = "-110px";
 alertFram.style.textAlign = "center";
 alertFram.style.lineHeight = "150px";
 alertFram.style.zIndex = "300";
 strHtml = "

    \n";
     strHtml += "
  • [中奖提醒]\n";
     strHtml += "
  • "+str+"\n";
     strHtml += "
  • \n";
     strHtml += "\n";
     alertFram.innerHTML = strHtml;
     document.body.appendChild(alertFram);
     document.body.appendChild(shield);
     this.doOk = function(){
      alertFram.style.display = "none";
      shield.style.display = "none";
     }
     alertFram.focus();
     document.body.onselectstart = function(){return false;};
    }
    </script>


     <script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
     <script src="/follow.js" type="text/javascript"></script>


    main.js文件

     代码如下

    $(document).ready(function(){
     //旋转角度
     var angles;
     //可抽奖次数
     var clickNum = 5;
     //旋转次数
     var rotNum = 0;
     //中奖公告
     var notice = null;
     //转盘初始化
     var color = ["#626262","#787878","rgba(0,0,0,0.5)","#DCC722","white","#FF4350"];
     var info = ["谢谢参与","  1000","   10","  500","  100"," 4999","    1","   20"];
     var info1 = ["再接再厉","      元","     元","  淘金币","     元","  淘金币","     元","  淘金币"]
     canvasRun();
     $("#tupBtn").bind("click",function(){
      if (clickNum >= 1) {
       //可抽奖次数减一
       clickNum = clickNum-1;
       //转盘旋转
       runCup();
       //转盘旋转过程“开始抽奖”按钮无法点击
       $("#tupBtn").attr("disabled", true);
       //旋转次数加一
       rotNum = rotNum + 1;
       //“开始抽奖”按钮无法点击恢复点击
       setTimeout(function(){
        alert(notice);
        $("#tupBtn").removeAttr("disabled", true);
       },6000);
      }
      else{
       alert("亲,抽奖次数已用光!");
      }
     });

     //转盘旋转
     function runCup(){
      probability();
      var degValue = "rotate("+angles+"deg"+")";
      $("#myCanvas").css("-o-transform",degValue);           //Opera
      $("#myCanvas").css("-ms-transform",degValue);          //IE浏览器
      $("#myCanvas").css("-moz-transform",degValue);         //Firefox
      $("#myCanvas").css("-webkit-transform",degValue);      //Chrome和Safari
      $("#myCanvas").css("transform",degValue);
     }

     //各奖项对应的旋转角度及中奖公告内容
     function probability(){
      //获取随机数
      var num = parseInt(Math.random()*(7 - 0 + 0) + 0);
      //概率
      if ( num == 0 ) {
       angles = 2160 * rotNum + 1800;
       notice = info[0] + info1[0];
      }
      //概率
      else if ( num == 1 ) {
       angles = 2160 * rotNum + 1845;
       notice = info[7] + info1[7];
      }
      //概率
      else if ( num == 2 ) {
       angles = 2160 * rotNum + 1890;
       notice = info[6] + info1[6];
      }
      //概率
      else if ( num == 3 ) {
       angles = 2160 * rotNum + 1935;
       notice = info[5] + info1[5];
      }
      //概率
      else if ( num == 4 ) {
       angles = 2160 * rotNum + 1980;
       notice = info[4] + info1[4];
      }
      //概率
      else if ( num == 5 ) {
       angles = 2160 * rotNum + 2025;
       notice = info[3] + info1[3];
      }
      //概率
      else if ( num == 6 ) {
       angles = 2160 * rotNum + 2070;
       notice = info[2] + info1[2];
      }
      //概率
      else if ( num == 7 ) {
       angles = 2160 * rotNum + 2115;
       notice = info[1] + info1[1];
      }
     }

     //绘制转盘
     function canvasRun(){
      var canvas=document.getElementById("myCanvas");
      var canvas01=document.getElementById("myCanvas01");
      var canvas03=document.getElementById("myCanvas03");
      var canvas02=document.getElementById("myCanvas02");
      var ctx=canvas.getContext("2d");
      var ctx1=canvas01.getContext("2d");
      var ctx3=canvas03.getContext("2d");
      var ctx2=canvas02.getContext("2d");
      createCircle();
      createCirText();
      initPoint();
     
      //外圆
      function createCircle(){
             var startAngle = 0;//扇形的开始弧度
             var endAngle = 0;//扇形的终止弧度
             //画一个8等份扇形组成的圆形
             for (var i = 0; i< 8; i++){
                 startAngle = Math.PI*(i/4-1/8);
                 endAngle = startAngle+Math.PI*(1/4);
                 ctx.save();
                 ctx.beginPath();
                 ctx.arc(150,150,100, startAngle, endAngle, false);
                 ctx.lineWidth = 120;
                 if (i%2 == 0) {
                  ctx.strokeStyle =  color[0];
                 }else{
                  ctx.strokeStyle =  color[1];
                 }
                 ctx.stroke();
                 ctx.restore();
             }
         }

         //各奖项
         function createCirText(){ 
          ctx.textAlign="start";
          ctx.textBaseline="middle";
          ctx.fillStyle = color[3];
          var step = 2*Math.PI/8;
          for ( var i = 0; i < 8; i++) {
           ctx.save();
           ctx.beginPath();
              ctx.translate(150,150);
              ctx.rotate(i*step);
              ctx.font = " 20px Microsoft YaHei";
              ctx.fillStyle = color[3];
              ctx.fillText(info[i],-30,-115,60);
              ctx.font = " 14px Microsoft YaHei";
              ctx.fillText(info1[i],-30,-95,60);
              ctx.closePath();
              ctx.restore();
          }
      }

      function initPoint(){
             //箭头指针
             ctx1.beginPath();
             ctx1.moveTo(100,24);
             ctx1.lineTo(90,62);
             ctx1.lineTo(110,62);
             ctx1.lineTo(100,24);
             ctx1.fillStyle = color[5];
             ctx1.fill();
             ctx1.closePath();
             //中间小圆
             ctx3.beginPath();
             ctx3.arc(100,100,40,0,Math.PI*2,false);
             ctx3.fillStyle = color[5];
             ctx3.fill();
             ctx3.closePath();
             //小圆文字
             ctx3.font = "Bold 20px Microsoft YaHei";
          ctx3.textAlign="start";
          ctx3.textBaseline="middle";
          ctx3.fillStyle = color[4];
             ctx3.beginPath();
             ctx3.fillText("开始",80,90,40);
             ctx3.fillText("抽奖",80,110,40);
             ctx3.fill();
             ctx3.closePath();
             //中间圆圈
             ctx2.beginPath();
             ctx2.arc(75,75,75,0,Math.PI*2,false);
             ctx2.fillStyle = color[2];
             ctx2.fill();
             ctx2.closePath();
      }
     }
    });

    css代码如下

     代码如下 *{
     padding: 0px;
     margin: 0px;
     font-size: 16px;
     font-family: "Microsoft YaHei";
    }
    .turnplate_box{
     width: 300px;
     height: 300px;
     margin: 100px auto;
     position: relative;
    }
    .turnplate_box canvas{
     position: absolute;
    }
    #myCanvas{
     background-color: white;
     border-radius: 100%;
    }
    #myCanvas01,#myCanvas03{
     left: 50px;
     top: 50px;
     z-index: 30;
    }
    #myCanvas02{
     left: 75px;
     top: 75px;
     z-index: 20;
    }
    #myCanvas{
        -o-transform:  transform 6s;
     -ms-transform:  transform 6s;
     -moz-transform:  transform 6s;  
     -webkit-transform:  transform 6s;
     transition: transform 6s;
     -o-transform-origin:  50% 50%;
     -ms-transform-origin:  50% 50%;
     -moz-transform-origin:  50% 50%;  
     -webkit-transform-origin:  50% 50%;
     transform-origin: 50% 50%;
    }
    .turnplatw_btn{
     width: 60px;
     height: 60px;
     left: 120px;
     top: 120px;
     border-radius: 100%;
     position: absolute;
     cursor: pointer;
     border: none;
     background: transparent;
     outline: none;
     z-index: 40;
    }

    注意:上面的jquery包大家网上下载,同时html5与css3只有高版本的浏览器才支持哦。

    本文来源:http://www.bbyears.com/wangyezhizuo/90817.html

热门标签

更多>>

本类排行