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