换个方式绘制转盘图，抽奖
截图：
代码：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Canvas绘图大转盘抽奖功能</title>
<script type="text/javascript">
//用原生的js的时候我们通常用onload
window.onload = function() {
//访问ID对象myCanvas
var c = document.getElementById("item");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#EB826B"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "5"; //lineWidth 设置或返回当前的线条宽度。
//园的绘制
//arc(x,y,r,start,stop)
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.arc(250, 250, 205, 0, 2 * Math.PI);
ctx.stroke();
//路径绘制，扇形圆弧1/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(450, 250);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 0 * Math.PI / 180, 60 * Math.PI / 180);
ctx.lineTo(350, 423.4);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//路径绘制，扇形圆弧2/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(350, 423.4);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 60 * Math.PI / 180, 120 * Math.PI / 180);
ctx.lineTo(150, 423.4);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//路径绘制，扇形圆弧3/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(150, 423.4);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 120 * Math.PI / 180, 180 * Math.PI / 180);
ctx.lineTo(50, 250);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//路径绘制，扇形圆弧4/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(50, 250);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 180 * Math.PI / 180, 240 * Math.PI / 180);
ctx.lineTo(150, 76.7);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//路径绘制，扇形圆弧5/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEF1CB"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(150, 76.7);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 240 * Math.PI / 180, 300 * Math.PI / 180);
ctx.lineTo(350, 76.7);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//路径绘制，扇形圆弧6/6
ctx.beginPath(); //beginPath() 起始一条路径，或重置当前路径
ctx.strokeStyle = "#FFBE46"; //strokeStyle 设置或返回用于笔触的颜色、渐变或模式
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.fillStyle = "#FEE9A7"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx.moveTo(350, 76.7);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx.arc(250, 250, 200, 300 * Math.PI / 180, 360 * Math.PI / 180);
ctx.lineTo(450, 250);
ctx.lineTo(250, 250);
ctx.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx.stroke();
ctx.fill(); //填充当前绘图（路径）。
//锁画布(为了保存之前的画布状态)
ctx.save();
//重置画布并旋转文本
ctx.translate(800, 150);
ctx.rotate(120 * Math.PI / 180);
//设置奖品描述1
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券15元", 300, 300);
ctx.translate(650, -50);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述2
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("金币", 240, 370);
ctx.translate(550, 150);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述3
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券5元", 100, 300);
ctx.translate(350, 120);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述4
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("理财代金券", 100, 200);
ctx.translate(270, -30);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述5
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("京东券30元", 200, 150);
ctx.translate(350, -200);
ctx.rotate(60 * Math.PI / 180);
//设置奖品描述6
ctx.fillStyle = "blue";
ctx.lineWidth = "2"; //lineWidth 设置或返回当前的线条宽度。
ctx.font = "20px Arial";
ctx.fillText("理财加息券", 300, 200);
//锁画布(为了保存之前的画布状态)
ctx.save();
//绘制指针
var c2 = document.getElementById("point");
var ctx2 = c2.getContext("2d");
ctx2.fillStyle = "red"; //fillStyle 设置或返回用于填充绘画的颜色、渐变或模式。
ctx2.moveTo(100, 0);
//arc（）参数依次：圆形坐标X,Y;半径长度；起始度数；结束度数
ctx2.arc(50, 50, 50, 0 * Math.PI / 180, 270 * Math.PI / 180);
ctx2.lineTo(50, 0);
ctx2.closePath(); //closePath() 创建从当前点回到起始点的路径。
ctx2.stroke();
ctx2.fill(); //填充当前绘图（路径）。
//document.getElementById("pointer")：访问ID对象，onclick 点击事件
document.getElementById("pointer").onclick = function() {
var num = Math.floor(Math.random() * 3600); //求得随机的旋转度数
document.getElementById("item").style.transform = 'rotate(' + num + 'deg)';
// alert(num);
num %= 360; //num=num%360;摩以360后的余数，
//得到一个1至360的数值，进行转盘分成几分的判断
//设定旋转变换3秒后执行下面的提示
setTimeout(function() {
if(num <= 60.0 * 1+30.0) {
alert('理财代金券');
} else if(num <= 60.0 * 2+30.0) {
alert('京东券5元');
} else if(num <= 60.0 * 3+30.0) {
alert('金币');
} else if(num <= 60.0 * 4+30.0) {
alert('京东券15元');
} else if(num <= 60.0 * 5+30.0) {
alert('理财加息券');
} else if(num <= 60.0 * 6+30.0) {
alert('京东券30元');
}
}, 3000);
}
}
</script>
<style type="text/css">
#banner {
width: 600px;
height: 600px;
margin: 10px auto;
padding: 0;
overflow: hidden;
position: relative;
background-color: greenyellow;
}
#turnplate {
width: 500px;
height: 500px;
position: absolute;
top: 50px;
left: 50px;
}
#turnplate #item{
transition: all 3s ease-out ;
}
#pointer{
width: 100px;
height: 100px;
position: absolute;
top: 250px;
left: 250px;
cursor: pointer;
transform: rotate(-45deg);
}
</style>
</head>
<body>
<div id="banner">
<div id="turnplate">
<canvas id="item" width="500px" height="500px"></canvas>
</div>
<div id="pointer">
<canvas id="point" width="100px" height="100px"></canvas>
</div>
</div>
</body>
</html>