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

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

The post Crear una ruleta html5 para rifar cosas, también conocido como winwheel appeared first on Develoteca.