Crear una ruleta html5 para rifar cosas, también conocido como winwheel

DESCARGA : Scripts para Ruleta

Crear una ruleta html5 para un valor aleatorio también conocido como winwheel, esta interesante librería puede crear una ruleta para poner diferentes elementos como son nombres de personas, nombres de equipos, retos, etc.

El detalle con esta librería es que hay que saberlo implementar, modificar y adaptar a tus necesidades, el siguiente enlace es del autor de la librería y en ella se encuentra muy buena documentación y ejemplo de uso: http://dougtesting.net/winwheel/docs


Una de las principales cualidades son los segmentos que son la parte fundamental de la creación de la ruleta, a continuación te explicamos cómo crear una ruleta simple.

Si quieres una implementación, puedes hacerlo en el siguiente enlace: https://oscaruhp.github.io/Laruleta/
1.- Como primer paso tienes que agregar los archivos js que están adjuntos a este artículo.

<script src="Winwheel.js"></script>
 <script src="TweenMax.min.js"></script>

2.- Crea los elementos que controlan y muestran la ruleta.

<input type="button" value="Girar" onclick="miRuleta.startAnimation();" />
 <br />
 <br />
 <canvas id='canvas' height="400" width="400"></canvas>

3.- Configura el script de la ruleta.

var miRuleta = new Winwheel({
           'numSegments': 5, // Número de segmentos
           'outerRadius'    : 170, // Radio externo
            'segments':[ // Datos de los segmentos
                { 'fillStyle': '#f1c40f', 'text': 'CSharp' },
                { 'fillStyle': '#2ecc71', 'text': 'JavaScript' },
                { 'fillStyle': '#e67e22', 'text': 'Python' },
                { 'fillStyle': '#e74c3c', 'text': 'Php' },
                { 'fillStyle': '#8e44ad', 'text': 'Go' },
            ],
            'animation': { 
                'type': 'spinToStop', // Giro y alto
                'duration': 5, // Duración de giro
                'callbackFinished': 'Mensaje()', // Función para mostrar mensaje
                'callbackAfter': 'dibujarIndicador()' // Funciona de pintar indicador
            }
         });

4.- Crea las funcionas del indicador y la función de mensaje de la ruleta.

// Funciones complementarias 
dibujarIndicador();
       function Mensaje() {
           var SegmentoSeleccionado = miRuleta.getIndicatedSegment();
           alert("Elemento seleccionado:" + SegmentoSeleccionado.text + "!");
           miRuleta.stopAnimation(false);
           miRuleta.rotationAngle = 0;
           miRuleta.draw();
           dibujarIndicador();
       }
       function dibujarIndicador() {
            var ctx = miRuleta.ctx;
            ctx.strokeStyle = 'navy';     
            ctx.fillStyle = 'black';     
            ctx.lineWidth = 2;
            ctx.beginPath();             
            ctx.moveTo(170, 0);          
            ctx.lineTo(230, 0);          
            ctx.lineTo(200, 40);
            ctx.lineTo(171, 0);
            ctx.stroke();                
            ctx.fill();                  
       }

You may also like...

  • Luis Urdaneta

    Buenas, muchas gracias por compartir este script.
    Una pregunta como puedo hacer para que se detenga en el item especifico, ejempo quiero que gire 5 segundos, coloco duration=5, pero si quiero que se detenga en PHP como podria hacerlo?