Estoy construyendo una ruleta giratoria que es llenada por base de datos lo cual hago el siguiente codigo pero al hora de ejecutarlo me sale
rotateWheel is not defined
supuestamente lo que est mal es
spinTimeout = setTimeout("rotateWheel()", 3000);
ESte es codigo que estoy ejecutando:
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();
});
});
}