用html5+js 做一个转盘抽奖怎么做,求源码!
发布网友
发布时间：2022-04-29 11:32
共2个回答
懂视网
时间：2022-05-12 04:39
最近在学canvas做动画，于是就写个转盘练下手。
上个简陋的成果图（中间那个是转的指针，外面的圈是图片，懒得写了哈哈哈）
代码很简单，都注释了，直接上代码吧，嘤嘤嘤
html
<body> <canvas id="canvas">您的浏览器不支持canvas</canvas> <img src="./zp.jpg" alt="" id="img"> </body>
css
<style>
#canvas{
position: absolute;
left: 230px;
top: 230px;
}
#img{
width: 600px;
height: 600px;
}
</style>js
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
//设定画布和宽
canvas.width=140;
canvas.height=140;
var then = Date.now();
var now;//利用时间差来控制转盘最小转动时间
var first_deg=0;//用来记录转动的角度
var rotate_deg=0;//每次转动的角度，用来实现变速运动
var end_deg =85;//中奖角度
var speedUp = true;//判断是否在加速阶段
var f;
// 因为canvas的rotate函数是根据左上角坐标（0,0）来旋转的，所以移动画布
context.translate(70,70);
function draw(){
context.clearRect(-70, -70, 70, 70);
context.beginPath();
context.arc(0, 0, 50, Math.PI / 180 * 0, Math.PI / 180 * 360, true);
context.moveTo(-50,0);
context.lineTo(50,0);
context.lineTo(0,-70);
context.rotate(rotate_deg*Math.PI/180);
context.closePath();
context.fillStyle='red';
context.fill();
}
// 将运动分为3段，加速，匀速，减速
function loop(){
//循环调用，产生动画效果
f = window.requestAnimationFrame(loop);
now = Date.now();
//开始加速转动，转到速度为20就不加速了，至于为什么是20，看起来舒服而已
if(rotate_deg<=20&&speedUp){
rotate_deg +=1;
};
//2s后开始减速（即最小转动时间），减速是为了视觉上的美观
if(now - then > 2000){
//如果下面设置的是固定角度，那这里的最小速度建议为1，因为每次转动角度过大，一圈很可能错过中奖的角度，导致转很多圈。
if(rotate_deg>=2){
speedUp = false;
rotate_deg -=1;
}
//设置中奖区间为+-5度（设置固定角度会让动画有点难看）
if(first_deg%360>=end_deg-5&&first_deg%360<=end_deg+5){
window.cancelAnimationFrame(f);//停止循环
//中奖操作
}
};
first_deg += rotate_deg;//记录转过的角度
draw();//绘制图形
}
loop();最后
现在这个转盘比较大的问题就是，如果中奖区间比较小，那减速后转动的时间就长一些，最低速度转很久才停下。当区间大的时候一下子就停下了，减速效果不明显，视觉上看起来很奇怪。
相关文章推荐：
html5 canvas用来绘制弧形的代码实现
HTML5实现魔方游戏的代码
HTML5结合互联网+ 实现的3D隧道（附代码）
热心网友
时间：2022-05-12 01:47
自己参考改吧
<input type="button" value="开始旋转" onclick="spin();" style="float: left;" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["北京", "上海", "天津", "南京",
"杭州", "深圳", "武汉", "济南",
"重庆", "大连", "合肥", "郑洲"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px sans-serif';
for(var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
