Animation inside a canvas - spinning wheel

1

I am building a spinning wheel that is filled by database which I do the following code but at the time of executing it I get

rotateWheel is not defined

supposedly what is wrong is

 spinTimeout = setTimeout("rotateWheel()", 3000);

This is the code I'm running:

var startAngle = 0;
var arc = Math.PI / 5;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
var colors;
var restaraunts;

function girar_ruleta() {

var dato;
var mesa = $("#numero_unico").val();
$('#ruleta_giratoria').modal('show');
$.post("php/traer_madres.php", {mesa: mesa}, function (data) {
    //si tu data es un string agrega
    data = $.parseJSON(data);
    dato = [];
    for (element in data.data) {
        dato.push(data.data[element]["nombre_completo"])
    }
    colors = ["#d50000", "#8bc34a", "#ffeb3b", "#009688", "#ff5722", "#9e9e9e", "#e91e63", "#9c27b0", "#3f51b5", "#009688"];
    restaraunts = dato;
    draw();

    function draw() {
        drawRouletteWheel();

    }

    function drawRouletteWheel() {
        var canvas = document.getElementById("confetti-intro");
        if (canvas.getContext) {
            var outsideRadius = 340;
            var textRadius = 190;
            var insideRadius = 75;
            ctx = canvas.getContext("2d");
            ctx.clearRect(0, 0, 400, 400);
            ctx.strokeStyle = "white";
            ctx.lineWidth = 2;
            ctx.font = "15px Arial";
            for (var i = 0; i < colors.length; i++) {
                var angle = startAngle + i * arc;
                ctx.fillStyle = colors[i];
                ctx.beginPath();
                ctx.arc(450, 450, outsideRadius, angle, angle + arc, false);
                ctx.arc(450, 450, insideRadius, angle + arc, angle, true);
                ctx.stroke();
                ctx.fill();
                ctx.save();
                ctx.shadowOffsetX = -1;
                ctx.shadowOffsetY = -1;
                ctx.shadowBlur = 0;
                ctx.fillStyle = "#FFFFFF";
                ctx.translate(450 + Math.cos(angle + arc / 2) * textRadius, 450 + Math.sin(angle + arc / 2) * textRadius);
                ctx.rotate(angle + arc / 25 + Math.PI / 25);
                var text = restaraunts[i];
                ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                ctx.restore();
            }
            //Fecha
            ctx.fillStyle = "black";
            ctx.beginPath();
            ctx.moveTo(450 - 8, 450 - (outsideRadius + 10));
            ctx.lineTo(450 + 8, 450 - (outsideRadius + 10));
            ctx.lineTo(450 + 8, 450 - (outsideRadius - 10));
            ctx.lineTo(450 + 18, 450 - (outsideRadius - 10));
            ctx.lineTo(450 + 0, 450 - (outsideRadius - 26));
            ctx.lineTo(450 - 18, 450 - (outsideRadius - 10));
            ctx.lineTo(450 - 8, 450 - (outsideRadius - 10));
            ctx.lineTo(450 - 8, 450 - (outsideRadius + 10));
            ctx.fill();
        }
    }

    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()", 3000);
    }

    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 = '15 px Arial';
        ctx.fillStyle = "black";
        var text = restaraunts[index];
        ctx.fillText(text.replace(/^\s*|\s*$/g, ""), 450 - ctx.measureText(text.replace(/^\s*|\s*$/g, "")).width / 2, 450 + 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);
    }

    $("#ivan_more").click(function () {
        spinAngleStart = Math.random() * 10 + 10;
        spinTime = 0;
        spinTimeTotal = Math.random() * 3 + 4 * 2000;
        rotateWheel();
    });
});

}

    
asked by Ivan More Flores 11.05.2017 в 22:27
source

1 answer

0

Write it like this, without quotes and parentheses

setTimeout(rotateWheel, 3000)
    
answered by 11.05.2017 / 22:41
source