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