下面再介绍一个canvas实例，使用canvas技术实现一个大转盘，在抽奖中用的比较多，实现后的效果如果所示：
大转盘.png
第一步：绘制扇形
首先通过一个for循环绘制6个扇形，依次绘制不同的颜色。
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var count = 6,//将圆分成6份
radius = 130;//半径
ctx.translate(150,150);//将坐标系原点移动中心点
var colors = ['#D7504C','#F0990E','#677BE7','#0DAF86','#0B7ED9','#38D3E9'];
for (var i = 0;i<count;i++){
//绘制新路径
ctx.beginPath();
//计算弧度
var radian = 360/count * Math.PI / 180;
//移动到原点
ctx.moveTo(0,0);
//绘制弧度
ctx.arc(0,0,radius,radian * i,radian * i + radian);
// 颜色间隔
ctx.fillStyle = colors[i]
//填充扇形
ctx.fill();
}
第二步：绘制文字
绘制完扇形后，再将文字绘制到扇形上面，具体的实现过程如下所示：
//绘制文字
ctx.fillStyle = '#fff';
ctx.font="20px Microsoft YaHei";
ctx.rotate(radian * i + radian / 2);
var text = i + 1 +'等奖';
var x = ctx.measureText(text).width;
ctx.fillText( text,x,10,radius);
第三步：旋转
旋转采用的是jQueryRotate的框架，实现比较简单，具体如下所示：
$('#canvas').stopRotate();
$('#canvas').rotate({
angle: 0,
animateTo: Math.random() * 360 + 360 * 5, // 这里多旋转了5圈，圈数越多，转的越快
duration: 8000,
callback: function() { // 回调
//弹出中奖提示
}
});
实例代码
实现大转盘的代码全部贴上来了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>大转盘</title>
<style>
.start{
width: 40px;
height: 40px;
background: #fff;
line-height: 40px;
font-size: 20px;
text-align: center;
border-radius: 20px;
position: absolute;
left: 135px;
top: 135px;
}
.start::before{
position: absolute;
content: '';
width: 0;
height: 0;
top: -23px;
left: 5px;
border-width: 15px;
border-style: solid;
border-color: transparent;
border-bottom-color: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<canvas id="canvas" height="300" width="300"></canvas>
<div class="start" onclick="start()">go</div>
</body>
<script src="./js/jquery.min.js"></script>
<script src="./js/jQueryRotate.js"></script>
<script>
draw();
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var count = 6,//将圆分成6份
radius = 130;//半径
ctx.translate(150,150);//将坐标系原点移动中心点
var colors = ['#D7504C','#F0990E','#677BE7','#0DAF86','#0B7ED9','#38D3E9'];
for (var i = 0;i<count;i++){
ctx.save();
//绘制新路径
ctx.beginPath();
//计算弧度
var radian = 360/count * Math.PI / 180;
//移动到原点
ctx.moveTo(0,0);
//绘制弧度
ctx.arc(0,0,radius,radian * i,radian * i + radian);
// 颜色间隔
ctx.fillStyle = colors[i]
//填充扇形
ctx.fill();
//绘制边线
ctx.strokeStyle = '#fff000';
ctx.lineWidth = 3;
ctx.stroke();
//绘制文字
ctx.fillStyle = '#fff';
ctx.font="20px Microsoft YaHei";
ctx.rotate(radian * i + radian / 2);
var text = i + 1 +'等奖';
var x = ctx.measureText(text).width;
ctx.fillText( text,x,10,radius);
ctx.restore();
}
}
function start() {
$('#canvas').stopRotate();
$('#canvas').rotate({
angle: 0,
animateTo: Math.random() * 360 + 360 * 5, // 这里多旋转了5圈，圈数越多，转的越快
duration: 8000,
callback: function() { // 回调
//弹出中奖提示
}
});
}
</script>
</html>
网友评论