最近，公司在每週五下午會有一次個人分享沙龍。上週我自願參加了，因爲每週都是由當前主講人來決定下次的主講人，於是就有做一個抽獎頁面的想法，話不多說，先看效果。
![這裏寫圖片描述]()
點擊抽獎之後，轉盤的速度會由慢到快，然後由快到慢再停止，整個過程持續時間是3s,下面是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>抽獎</title>
<style>
.text-center {
text-align: center;
}
.title {
color: blue;
}
.div canvas{
position: absolute;
top:0;left:0;
}
button{
width:200px;height:60px;
color:red;
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body class="text-center">
<div style="width:1200px;height:1200px;margin:50px auto;zoom: 0.5;position: relative;" class="text-center div">
<canvas id="canvas"></canvas>
<canvas id="canvas2"></canvas>
</div>
<button onclick="go()">開始抽獎</button>
</body>
<script>
var colors = ['#33ACB5', '#DF5C5D', '#B4D966', '#5450B3', '#FFD457', '#3A97EA', '#FAA167', '#63CA97', '#9A50B3'];
var data = [
{name: '科比', color: colors[0]},
{name: '韋德', color: colors[1]},
{name: '保羅', color: colors[2]},
{name: '卡特', color: colors[3]},
{name: '詹姆斯', color: colors[4]},
{name: '庫裏', color: colors[5]},
{name: '哈登', color: colors[6]},
{name: '喬治', color: colors[7]},
{name: '安東尼', color: colors[8]},
{name: '威少', color: colors[6]},
{name: '羅斯', color: colors[5]}
];
var canvas = document.getElementById('canvas');
var canvas2 = document.getElementById('canvas2');
canvas.width = canvas2.width = 1200;
canvas.height = canvas2.height = 1200;
var sector = canvas.getContext("2d");
var hand = canvas2.getContext("2d");
var w = canvas.width;
var h = canvas.height;
paintName(data);
hand.fillStyle = "#fff";
hand.fillRect(600-5, 50, 10, 600);
hand.arc(w/2,h/2,30,0,Math.PI*2);
hand.fill();
function paintName(data) {
var len = data.length;
var angle = Math.PI * 2 / len;
for (var i = 0; i < data.length; i++) {
var item = data[i];
sector.beginPath();
sector.moveTo(w / 2, h / 2);
sector.lineTo(w - 3, h / 2);
sector.arc(w / 2, h / 2, h / 2 - 3, 0, angle);
sector.lineTo(w / 2, h / 2);
sector.fillStyle = item.color;
sector.fill();
sector.translate(600, 600);
sector.rotate(angle);
sector.translate(-600, -600);
sector.save();
sector.translate(900, 600);
sector.font = "100px Georgia";
sector.fillStyle = "#fff";
sector.fillText(item.name, -80, -60);
sector.translate(-1000, -600);
sector.restore();
}
}
function go() {
var time = 3000;
var a0 = (Math.random()+5) / 100;
var clock = 20;
var interval = setInterval(function () {
var a = time >= 1500 ? a0:-a0;
var v = time>=1500 ? a * (3000-time) : a0*1500 + a * (1500-time);
sector.translate(600,600);
sector.rotate(Math.PI/180 * v);
sector.translate(-600,-600);
sector.clearRect(0,0,1200,1200);
paintName(data);
time -= clock;
if(time == 0){
window.clearInterval(interval);
}
},clock)
}
</script>
</html>
