canvas实现大转盘代码-html代码-BFW代码库

canvas实现大转盘代码

代码语言：html

所属分类：大转盘

代码描述：canvas实现大转盘代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <style>
        .wheel{
          display:inline-block;
          position:relative;
          overflow:hidden;
          margin: 100px;
        }
        .wheel:after{
          content:"";
          background:red;
          border:2px solid white;
          position:absolute;
          top:-7px;
          left:50%;
          width:10px;
          height:10px;
          margin-left:-7px;
          transform: rotate(45deg)
        }
        .spin-wheel {
          margin: 0 auto;
              -webkit-animation: rotate 0.5s linear infinite;
                  animation: rotate 0.5s linear infinite;
        }
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
        
            100% {
                transform: rotate(360deg);
            }
        }
    </style>

</head>

<body>
    <!-- partial:index.partial.html -->
    <div class="wheel">
        <canvas class="" id="canvas" width="320" height="320"></canvas>
    </div>

    <button onclick="start()">Start</button>
    <!-- partial -->
    <script>
        var color    = ['#ca7','#7ac','#77c','#aac','#a7c','#ac7', "#caa"];
    var label    = ['bootstrap模板库', '插件','网页模板','小图标','插画','js小游戏',"谢谢参与"];
    var stopAngel = []; // stop angels starting from label index 1(0...label.length)
    var slices = color.length;
    var sliceDeg = 360/slices;
    var deg = 260;
    var speed = 5;
    var slowDownRand = 0;
    var ctx = document.getElementById('canvas').getContext('2d');
    var width = document.getElementById('canvas').width; // size
    var center = width/2;      // center
    // var center = 150;
    var isStopped = false;
    var lock = false;
    
    function rand(min, max) {
      return Math.random() * (max - min) + min;
    }
    
    function oddEven(num) {
      return num % 2 ?  true : false;
    }
    
    function deg2rad(deg){ return deg * Math.PI/180; }
    
    function drawSlice(index, deg, color){
       var sAngel;
      var current =  (index <= 0) ? deg : stopAngel[index - 1];
      if (oddEven(index)) {
        if (current <= 0) {
          sAngel = Math.abs(Math.floor(260 + sliceDeg + 10 ));      
        } else {
          sAngel = Math.abs(Math.floor(current - sliceDeg + 10));
        }
        current = sAngel;
        stopAngel.push(current);
      } else {
        if (current <= 0) {
          sAngel = Math.abs(Math.floor(260 + sliceDeg - 10));      
        } else {
          sAngel = Math.abs(Math.floor(current - sliceDeg.........完整代码请登录后点击上方下载按钮下载查看