HTML 5幸运轮(轮）

HTML 5 fortune wheel (lunchwheel)

本文关键字：幸运 HTML      更新时间：2023-09-26

我一直在使用HTML5编写一个简单的幸运轮实现表单，但我在寻找赢家部分时遇到了一些问题，以下是JSFiddle:中的代码

http://jsfiddle.net/bramp/94jP6/

JSFiddle:中的重要功能

// Called when segments have changed
update: function() {
    // Ensure we start mid way on a item
    //var r = Math.floor(Math.random() * wheel.segments.length);
    var r = 0;
    wheel.angleCurrent = ((r + 0.5) / wheel.segments.length) * Math.PI * 2;
    var segments = wheel.segments;
    var len = segments.length;
    var colors = wheel.colors;
    var colorLen = colors.length;
    // Generate a color cache (so we have consistant coloring)
    var seg_color = new Array();
    for (var i = 0; i < len; i++)
    seg_color.push(colors[segments[i].hashCode().mod(colorLen)]);
    wheel.seg_color = seg_color;
    wheel.draw();
}

和

drawNeedle: function() {
    var ctx = wheel.canvasContext;
    var centerX = wheel.centerX;
    var centerY = wheel.centerY;
    var size = wheel.size;
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#000000';
    ctx.fileStyle = '#ffffff';
    ctx.beginPath();
    ctx.moveTo(centerX + size - 40, centerY);
    ctx.lineTo(centerX + size + 20, centerY - 10);
    ctx.lineTo(centerX + size + 20, centerY + 10);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
    // Which segment is being pointed to?
    var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;
    // Now draw the winning name
    ctx.textAlign = "left";
    ctx.textBaseline = "middle";
    ctx.fillStyle = '#000000';
    ctx.font = "2em Arial";
    ctx.fillText(wheel.segments[i], centerX + size + 25, centerY);
},

第256行是当前代码获得获胜者的位置：

var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;

但那是在方向盘的右侧，我试图让它把这个片段作为制胜点。我已经和它斗争了很长时间，我感谢你的帮助或指导。感谢

这是一个有效的解决方案Fiddle。解释如下：

首先，我们需要将指针画到轮子顶部的正确位置：

drawNeedle: function() {
    ...
    ctx.beginPath();
    ctx.moveTo(centerX + 20, centerY - size - 20);
    ctx.lineTo(centerX - 20, centerY - size - 20);
    ctx.lineTo(centerX  , centerY - size + 20);
    ctx.closePath();
    ...
}

在你给出的代码段中：

var i = wheel.segments.length - Math.floor((wheel.angleCurrent / (Math.PI * 2)) * wheel.segments.length) - 1;

wheel.angleCurrent / (Math.PI * 2)部分表示它位于右侧。请注意，在JavaScript中，这是"单位圆"的起点。要解决这个问题，我们只需要将角度偏移90度（或者在我们的情况下添加以弧度为单位的Math.PI/2）：

    var change = wheel.angleCurrent + (Math.PI/2);
    var i = wheel.segments.length - Math.floor((change / ( Math.PI * 2)) * wheel.segments.length) - 1;
    if(i < 0) i = i + 17; // 17 = wheel.segments.length

i的计算方式取决于我们从右边开始。当我们从-5 to 12而不是0 to 16更改它时，它会偏移一些项。为了解决负面项目（我们的抵消项目）的问题，我们只需要将它们添加到我们的13到16。换言之，加17（与wheel.segments.length相同）。

相关文章：