Foros del Web » Programando para Internet » Javascript »

Ruleta

Estas en el tema de Ruleta en el foro de Javascript en Foros del Web. 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()"; ...
  #1 (permalink)  
Antiguo 10/02/2016, 21:32
 
Fecha de Ingreso: febrero-2016
Mensajes: 1
Antigüedad: 8 años, 1 mes
Puntos: 0
Mensaje 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>
  #2 (permalink)  
Antiguo 10/02/2016, 22:35
 
Fecha de Ingreso: noviembre-2010
Mensajes: 7
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Ruleta

he estado intentado, pero no lo he logrado, pero a mi parecer, es imposible ya que el mismo código convierte todo a texto, pero no he examinado todo profundamente, de seguro alguien con mayor conocimiento en javascript podría ayudarte.

buena suerte.

Etiquetas: evento, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:05.