canvas实现大转盘代码

代码语言:html

所属分类:大转盘

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

代码标签: 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(&#.........完整代码请登录后点击上方下载按钮下载查看

网友评论0