Ruleta Muy Buenas noches, mi duda es como puedo poner imágenes en esta ruleta en vez de letras este es el código:
<input id="boton" type="button" onclick="spin()"; onmouseOver="alert
('EVENTO CERRADO')"/><img src="imagen/boton.png"/>
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
var colors = ["#4B459B", "#848484", "#9B9B45", "#FFFF00",
"#FF4000", "#FF0000", "#8000FF", "#0000FF"];
var ruleta = ["PERDISTE", "SORPRESA", "PERDISTE", "GANASTE",
"PERDISTE", "GANASTE", "PERDISTE", "GANASTE"];
var startAngle = 0;
var arc = Math.PI / 4;
var spinTimeout = null;
var spinArcStart = 20;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 248;
var textRadius = 190;
var insideRadius = 120;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "#00090B";
ctx.lineWidth = 2;
ctx.font = 'bold 20px sans-serif';
for(var i = 0; i < 8; 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 = "#00090B";
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 = ruleta[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "#00090B";
ctx.beginPath();
ctx.moveTo(250 - 7, 250 - (outsideRadius + 8));
ctx.lineTo(250 + 7, 250 - (outsideRadius + 8));
ctx.lineTo(250 + 7, 250 - (outsideRadius - 8));
ctx.lineTo(250 + 13, 250 - (outsideRadius - 8));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 18));
ctx.lineTo(250 - 13, 250 - (outsideRadius - 8));
ctx.lineTo(250 - 7, 250 - (outsideRadius - 8));
ctx.lineTo(250 - 7, 250 - (outsideRadius + 8));
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 20px sans-serif';
var text = ruleta[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>
