• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

HTML5 + CANVAS rotacja koła fortuny

VPS Starter Arubacloud
0 głosów
359 wizyt
pytanie zadane 27 lipca 2019 w HTML i CSS przez Jakub2111 Nowicjusz (180 p.)

Witam,

Potrzebuje pomocy, nie wiem jak napisać funkcje która obraca koło na konkretne pole koła fortuny. Przykładowo spin(0), obraca koło na pozycje 0 (kolor złoty). Szukałem dużo informacji na ten temat lecz podczas próby obrotu przez obliczony radian, obrót jest błędny.

<button onclick="spins(0)">SPIN</button>
<canvas id="canvas" width="500" height="500"></canvas>
var startAngle = 0
var arc = Math.PI / (54 / 2);
var spinTimeout = null;

var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

function drawRouletteWheel() {
    var canvas = document.getElementById("canvas");
    if (canvas.getContext) {
        var outsideRadius = 200;
        var insideRadius = 100;
        var textRadius = 152;

        ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, 500, 500);


        ctx.strokeStyle = "transparent";
        ctx.lineWidth = 3;

        ctx.font = 'bold 15px Questrial, sans-serif';

        for (var i = 0; i < 54; i++) {
            var angle = startAngle + i * arc;
            if (i === 0)
                ctx.fillStyle = 'yellow';
            else if (i % 2 === 0)
                ctx.fillStyle = 'black';
            else if (i === 1 || i === 53 || i === 9 || i === 11 || i === 19 || i === 21 || i === 33 || i === 35 || i === 43 || i === 45)
                ctx.fillStyle = 'green';
            else
                ctx.fillStyle = 'red';

            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.fillStyle = "#ffffff";
            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 = 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 spins(num) {
    //radianone = (1 / 54 * 360) * Math.PI / 180;
    rad = Math.PI * 4 + num; // (360 * Math.PI / 180) - radianone * (num + 0.5);
    spinAngleStart = rad - startAngle;
    spinTime = 0;
    spinTimeTotal = 360;
    rotateWheel();
}

// PREVIOUS CODE

function spin() {
    spinAngleStart = Math.random() * 10 + 10;
    spinTime = 0;
    spinTimeTotal = Math.random() * 3 + 4 * 2000;
    rotateWheel();
}

function rotateWheel() {
    spinTime += 20;
    if (spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
    }
    var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
    startAngle += (spinAngle * Math.PI / 180);
    drawRouletteWheel();
    spinTimeout = setTimeout('rotateWheel()', 20);
}

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 Helvetica, Arial';
    var text = i
    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);
}

drawRouletteWheel();

Pozdrawiam, liczę na pomoc z waszej strony! :)

1 odpowiedź

0 głosów
odpowiedź 29 lipca 2019 przez Jakub2111 Nowicjusz (180 p.)
bump! naprawde potrzebuje pomocy

Podobne pytania

+8 głosów
3 odpowiedzi 558 wizyt
pytanie zadane 25 lipca 2016 w Nasze projekty przez goran. Użytkownik (930 p.)
+12 głosów
4 odpowiedzi 1,964 wizyt
pytanie zadane 12 kwietnia 2015 w JavaScript przez krecik1334 Maniak (58,390 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...