image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>转盘抽奖</title>
<style type="text/css">
.container{
width: 400px;
height: 400px;
border: 1px solid black;
position: relative;
}
canvas {
}
#img{
position: absolute;
width: 40px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<canvas id="tutorial" width="400" height="400"></canvas>
<img src="./start.png" id="img">
</div>
<script type="text/javascript">
function Draw(ctx, arr){
// arr = [{color: 'red',name: '1'},{color: 'blue',name: '2'},{color: 'green',name: '3'},{color: 'black',name: '4'}]
//初始化转盘
Draw.prototype.init = function(angleTo){
ctx.clearRect(0,0, 400, 400);
ctx.save();
ctx.translate(200, 200)
angleTo = angleTo || 0;
//外圈
ctx.arc(0, 0, 100, 0, 2 * Math.PI)
ctx.strokeStyle = 'red'
ctx.lineWidth = 20
ctx.stroke()
//内圈
ctx.beginPath()
ctx.arc(0, 0, 85, 0, 2 * Math.PI)
ctx.strokeStyle = 'pink'
ctx.lineWidth = 10
ctx.stroke()
// 旋转画布
ctx.rotate(angleTo * Math.PI / 180);
//扇形
var length = arr.length
var eachAngle = Math.PI / 180 * (360 / length)
var startAngle = 2 * Math.PI / 360 * (-90);
var endAngle = 2 * Math.PI / 360 * (-90) + eachAngle;
for(var i=0;i<arr.length;i++){
ctx.beginPath()
ctx.moveTo(0,0);
ctx.arc(0, 0, 80, startAngle, endAngle)
ctx.fillStyle = arr[i].color
ctx.fill()
ctx.closePath()
startAngle = endAngle
endAngle += eachAngle
}
//文字
startAngle = eachAngle / 2;
ctx.beginPath()
for(var i=0;i<arr.length;i++){
ctx.save();
ctx.rotate(startAngle);
ctx.fillStyle = 'white'
ctx.textAlign = "center";
ctx.fillText(arr[i].name, 0, -30)
startAngle += eachAngle;
ctx.restore();
}
ctx.restore();
}
//转盘抽奖
Draw.prototype.lottery = function(angel, callback){
angel = angel || 0;
angel = 360-angel;
angel += 1440;
// 基值（减速）
var baseStep = 50;
// 起始滚动速度
var baseSpeed =1;
// 步长
var count = 1;
var _this = this;
var timer = setInterval(function () {
_this.init(count);
if (count == angel) {
clearInterval(timer);
if (typeof callback == "function") {
callback();
}
}
count = count + baseStep * (((angel - count) / angel) > baseSpeed ? baseSpeed : ((angel - count) / angel))+0.1;
if (angel - count < 0.5) {
count = angel;
}
}, 25);
}
}
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext("2d");
//奖品列表
var tempArr = [{color: 'red',name: '1'},{color: 'blue',name: '2'},{color: 'green',name: '3'},{color: 'black',name: '4'},{color: 'yellow',name: '5'}]
var draw = new Draw(ctx, tempArr)
draw.init()
var btn = document.getElementById('img')
var isLotterying = false;
btn.onclick = function(){
if(isLotterying) return;
isLotterying = true
var angel = 360/tempArr.length
var index = tempArr.findIndex(function(v){return v.name === '2'}) //奖品在列表中的索引
draw.lottery(angel * index + angel/2, function(){
isLotterying = false
})
}
</script>
</body>
</html>
网友评论