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


The key bit of code - the parameters to Winwheel.js - used to create this wheel is shown below. To view the full source code used to create this example (including the power selectors and spin button) see the code for this example on Github...


<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>
            var 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()
	        {
	            // Get the segment indicated by the pointer on the wheel background which is at 0 degrees.
	            var winningSegment = theWheel.getIndicatedSegment();

	            // Do basic alert of the segment text.
	            alert("You have won " + winningSegment.text);
	        }
        </script>
    </body>
</html>

Previous:
< Examples Index
Next:
Basic Image Wheel >