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(&#.........完整代码请登录后点击上方下载按钮下载查看
网友评论0