Winwheel.js example: Basic code-drawn wheel

Here is an example of a basic prize wheel / winning wheel drawn on HTML canvas by the Winwheel.js JavaScript library. Rather than having to write the code to draw all the lines, arcs and fills needed to create this, you just specify some parameters in to the Winwheel contructor and Winwheel.js creates it all for you.


After choosing a power level and clicking 'Spin' the wheel animates for a few seconds, spinning to a stop with the prize won alerted to the user.


This example is included in the Winwheel.js download: /examples/basic_code_wheel/index.html




Power
High
Med
Low

Spin

  Play Again
     (reset)

Sorry, your browser doesn't support canvas. Please try another.

The code

<html>
    <head>
        <title>Code Wheel</title>
        <script src='Winwheel.js'></script>
    </head>
    <body>
        <canvas id='canvas' width='880' height='300'>
            Canvas not supported, use another browser.
        </canvas>
        <script>
            let theWheel = new Winwheel({
				'numSegments'  : 8,			// Number of segments
	            'outerRadius'  : 212,		// The size of the wheel.
	            'centerX'      : 217,		// Used to position on the background correctly.
	            'centerY'      : 219,
	            'textFontSize' : 28,		// Font size.
	            'segments'     :			// Definition of all the segments.
	            [
	               {'fillStyle' : '#eae56f', 'text' : 'Prize 1'},
	               {'fillStyle' : '#89f26e', 'text' : 'Prize 2'},
	               {'fillStyle' : '#7de6ef', 'text' : 'Prize 3'},
	               {'fillStyle' : '#e7706f', 'text' : 'Prize 4'},
	               {'fillStyle' : '#eae56f', 'text' : 'Prize 5'},
	               {'fillStyle' : '#89f26e', 'text' : 'Prize 6'},
	               {'fillStyle' : '#7de6ef', 'text' : 'Prize 7'},
	               {'fillStyle' : '#e7706f', 'text' : 'Prize 8'}
	            ],
	            'animation' :				// Definition of the animation
	            {
	                'type'     : 'spinToStop',
	                'duration' : 5,
	                'spins'    : 8,
	                'callbackFinished' : alertPrize
	            }
			});

			// Called when the animation has finished.
			function alertPrize(indicatedSegment)
	        {
	            // Do basic alert of the segment text.
	            alert("You have won " + indicatedSegment.text);
	        }
        </script>
    </body>
</html>

Previous:
< Examples Index 		Next:
Wheel of fortune >