<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>大转盘</title>
</head>
<body>
<div class="zhuanp">
<section id="turntable" class="gb-turntable">
<div class="gb-turntable-container">
<canvas class="gb-turntable-canvas" width="300" height="300px">抱歉!浏览器不支持。</canvas>
</div>
<a class="gb-turntable-btn" href="javascript:;">抽奖</a>
</section>
</div>
<script>
(function () {
var $,
ele,
container,
canvas,
num,
prizes,
btn,
deg = 0,
fnGetPrize,
fnGotBack,
optsPrize;
var cssPrefix,
eventPrefix,
vendors = {
'': '',
Webkit: 'webkit',
Moz: '',
O: 'o',
ms: 'ms'
},
testEle = document.createElement('p'),
cssSupport = {};
// 嗅探特性
Object.keys(vendors).some(function (vendor) {
if (testEle.style[vendor + (vendor ? 'T' : 't') + 'ransitionProperty'] !== undefined) {
cssPrefix = vendor ? '-' + vendor.toLowerCase() + '-' : '';
eventPrefix = vendors[vendor];
return true;
}
});
function normalizeEvent(name) {
return eventPrefix ? eventPrefix + name : name.toLowerCase();
}
function normalizeCss(name) {
name = name.toLowerCase();
return cssPrefix ? cssPrefix + name : name;
}
cssSupport = {
cssPrefix: cssPrefix,
transform: normalizeCss('Transform'),
transitionEnd: normalizeEvent('TransitionEnd')
}
var transform = cssSupport.transform;
var transitionEnd = cssSupport.transitionEnd;
function init(opts) {
fnGetPrize = opts.getPrize;
fnGotBack = opts.gotBack;
opts.config(function (data) {
prizes = opts.prizes = data;
num = prizes.length;
draw(opts);
});
events();
}
$ = function (id) {
return document.getElementById(id);
};
function draw(opts) {
opts = opts || {};
if (!opts.id || num >>> 0 === 0) return;
var id = opts.id,
rotateDeg = 360 / num / 2 + 90, // 扇形回转角度
ctx,
prizeItems = document.createElement('ul'), // 奖项容器
turnNum = 1 / num, // 文字旋转 turn 值
html = []; // 奖项
ele = $(id);
canvas = ele.querySelector('.gb-turntable-canvas');
container = ele.querySelector('.gb-turntable-container');
btn = ele.querySelector('.gb-turntable-btn');
if (!canvas.getContext) {
showMsg('抱歉!浏览器不支持。');
return;
}
// 获取绘图上下文
ctx = canvas.getContext('2d');
for (var i = 0; i < num; i++) {
// 保存当前状态
ctx.save();
// 开始一条新路径
ctx.beginPath();
// 位移到圆心,下面需要围绕圆心旋转
ctx.translate(150, 150);
// 从(0, 0)坐标开始定义一条新的子路径
ctx.moveTo(0, 0);
// 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。
ctx.rotate((360 / num * i - rotateDeg) * Math.PI / 180);
// 绘制圆弧
ctx.arc(0, 0, 150, 0, 2 * Math.PI / num, false);
// 颜色间隔
if (i % 2 == 0) {
ctx.fillStyle = '#ffb820';
} else {
ctx.fillStyle = '#ffcb3f';
}
// 填充扇形
ctx.fill();
// 绘制边框
ctx.lineWidth = 0.5;
ctx.strokeStyle = '#e4370e';
ctx.stroke();
// 恢复前一个状态
ctx.restore();
// 奖项列表
var prizeList = opts.prizes;
html.push('<li class="gb-turntable-item"> <span style="');
html.push(transform + ': rotate(' + i * turnNum + 'turn)">');
!!prizeList[i].img ? html.push('<img src="' + prizeList[i].img + '" />') : html.push(prizeList[i].text)
html.push('</span> </li>');
if ((i + 1) === num) {
prizeItems.className = 'gb-turntalbe-list';
container.appendChild(prizeItems);
prizeItems.innerHTML = html.join('');
}
}
}
function showMsg(msg) {
alert(msg);
}
function runRotate(deg) {
container.style[transform] = 'rotate(' + deg + 'deg)';
}
function events() {
bind(btn, 'click', function () {
addClass(btn, 'disabled');
fnGetPrize(function (data) {
optsPrize = {
prizeId: data[0],
chances: data[1]
}
// 计算旋转角度
deg = deg || 0;
deg = deg + (360 - deg % 360) + (360 * 10 - data[0] * (360 / num))
runRotate(deg);
});
// 中奖提示
bind(container, transitionEnd, eGot);
});
}
function eGot() {
if (optsPrize.chances) removeClass(btn, 'disabled');
fnGotBack(prizes[optsPrize.prizeId].text);
}
function bind(ele, event, fn) {
if (typeof addEventListener === 'function') {
ele.addEventListener(event, fn, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + event, fn);
}
}
function hasClass(ele, cls) {
if (!ele || !cls) return false;
if (ele.classList) {
return ele.classList.contains(cls);
} else {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
}
// addClass
function addClass(ele, cls) {
if (ele.classList) {
ele.classList.add(cls);
} else {
if (!hasClass(ele, cls)) ele.className += '' + cls;
}
}
// removeClass
function removeClass(ele, cls) {
if (ele.classList) {
ele.classList.remove(cls);
} else {
ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}
var gbTurntable = {
init: function (opts) {
return init(opts);
}
}
// (@see https://github.com/madrobby/zepto/blob/master/src/zepto.js)
window.gbTurntable === undefined && (window.gbTurntable = gbTurntable);
// AMD (@see https://github.com/jashkenas/underscore/blob/master/underscore.js)
if (typeof define == 'function' && define.amd) {
define('GB-canvas-turntable', [], function () {
return gbTurntable;
});
}
}());
document.addEventListener('DOMContentLoaded', function () {
gbTurntable.init({
id: 'turntable',
config: function (callback) {
callback && callback([{
text: '1元红包',
}, {
text: '2元红包'
},{
text: '100元红包'
}
, {
text: '3元红包'
}, {
text: '显示器',
}, {
text: '5元红包'
}, {
text: '6元红包'
}, {
text: '笔记本电脑'
}
])
},
getPrize: function (callback) {
// 获取中奖信息
var num = Math.random() * 7 >>> 0, //奖品ID
chances = num; // 可抽奖次数
callback && callback([num, chances]);
},
gotBack: function (data) {
alert('恭喜抽中' + data);
}
});
}, false);
</script>
</body>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;
padding:0;
}
body {
background-color: #fcd974;
height: 100%;
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
}
.bg{
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
}
.zhuanp{
position: fixed;
width: 100%;
评论0